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 = ??;
...