DOM window的事件和方法; Rails查询语法query(查询结构继承); turbolinks的局限;

window.innerHeight 是浏览器窗口可用的高度。

window.outerHeight 是浏览器窗口最大的高度。

打开chrome-inspector,上下移动inspector,看到screen右上角有坐标数字的变化。

 

window.scrollY  是当前顶部距离页面初始位置0的距离。创建滚动到顶,这个值是0。

 

HTML DOM offsetHeight Property

document.body.offsetHeight得到的是<body>元素(可以看到)的高度,包括padding, border, scrollbar, 不包括margin。(pixels)⚠️,可以看到的指content,忽略。

所以:

window.innerHeight + window.scrollY >= document.body.offsetHeight

指的是滚动到页面底部的情况。

 

scroll()方法被遗弃了,改用window.scrollTo(x, y)

 

DOM Events是针对Dom object的各类事件处理event handlers,和functions联合使用的。

Dom window也是dom对象,可以使用这些events.

关于scroll有3个写法:

1.  html:  <element onscroll="myFunction">

2. JS1: object.onscroll = function() { myScript };

3. JS2: object.addEventListener("scroll", myScript); ⚠️myScript是一个function的名字。

 

window对象也可以使用addEventListener()方法。虽然w3c上没有写。

 


 

query语法和rails。

posts = Post.order(id: :desc).limit(5)  ->

SELECT  "posts".* FROM "posts" ORDER BY "posts"."id" DESC LIMIT $1  [["LIMIT", 5]]

posts.last.id -> 47

posts.where("id < 47")->

#继承了posts的查询语法的结构:Post.order(id: :desc).limit(5),而不是posts集合本身。
SELECT  "posts".* FROM "posts" WHERE (id < 47) ORDER BY "posts"."id" DESC LIMIT $1  [["LIMIT", 5]]

 Post.order(id: :desc).limit(5).where("id < 47")中的limit和where关键字变换位置生成的SQL是一样的⬆️。


 

 

⚠️ turbolinks内绑定的事件和内部绑定的变量。

下面的代码是位于index.html.erb的第一行:变量current_post_id第一次会设定为一个值, 在turbolinks内部的代码会改变它的值。

如果把变量current_post_id的第一次声明放到turbolinks内部,则它的值永远不会改变了。👇。

这是因为turbolinks的运行机制的原因, turbolinks会缓存数据,触发的scroll事件是在turbolinks内,所以

current_post_id会使用turbolinks第一次缓存的值。

http://www.cnblogs.com/chentianwei/p/9296887.html

 

javascript:
   var current_post_id = "#{@posts.last.id}";
   document.addEventListener("turbolinks:load", function() {
    # 如过current_post_id放到这个位置,它因为scroll事件的触发而改变的值,又会改回来。

  $(window).scroll(function() {

      var current_post_id = ??;

 

      ...


 

posted @ 2018-07-30 22:21  Mr-chen  阅读(148)  评论(0编辑  收藏  举报