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内部，则它的值永远不会改变了。