Window 的调用笔记

如果需要调用 scrollbar 来改变布局，基本需要了解以下调用

scrollbar 是谁负责，答案是 window

 

Window.scrollY || Window.pageYOffset

• window scroll 了多少
• 2 decimal point
• alias for the pageYOffset
• var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
• first load IOS safari can not get value

 

Window.innerHeight

• 包括 horizontal scroll bar
• mobile after address hide, innerHeight will 增加

 

Window.outerHeight

• laptop 游览器全高（包括 bookmark）
• android 不包括 system bar
• IOS 包括 system bar

 

Window.scroll() || Window.scrollTo()

• scroll to 指定的 position
• window.pageYOffset = 200; （实现结果一样，不一样是这能兼容 IE）
• Element.scrollTo() (语法能调用在 element 上）

 

Windo.scrollBy()

• 从当下的位置出发
• Element.scrollBy() (语法能调用在 element 上）

 

兼容问题

IOS safari 已经能用 behaviour smooth（需要打开功能才能使用，应该和 chrome flag 一样概念）, 目前 polyfill 有支持，但是我的手机 （iphone 7 plus）感觉卡卡的...

---

 

其他

Window.screenY

• window.screenTop === window.screenY
• 游览器缩小后和 screen 之间的位置

 

Window.moveTo()

• 做一个 new window, then move 位置

 

Links

• https://www.zhangxinxu.com/wordpress/2019/07/js-scrollto-scrollby/comment-page-1/

 

window.pageYOffset = 200;