css修改滚动条样式_诡异的css之页面滚动

业务场景：tab锚点定位，滚动到一定位置时悬浮吸顶，滚出时取消等等，这是h5页面常见的需求

在写h5页面时，页面滚动一定是让开发者头痛的一部分。特别是当页面布局嵌套较深，子元素各种脱离文档流，我们在获取元素距离值、控制滚动条时会出现各种意想不到的情况。明明代码没有问题，但展现的效果就是和想象的不一样，此时是不是觉得css很诡异。其实不然，css也是有自己逻辑的，只是我们了解的还不够深入，今天带大家全面解析css之页面滚动。

写在前面：尽信书不如无书，人工撰写定有纰漏，争议之处可留言讨论

scrollTop 值一直为零，且不能赋值

涉及到页面滚动及定位时，我们一定会用到scrollTop。但很多时候会发现，明明自己获取和设置的代码没有错，但scrollTop值一直为0，真的有要砸电脑的冲动。。。

这是因为你没有真正理解scrollTop的应用场景，现在让我们一起彻底搞懂它。

scrollTop设置的是滚动条的位置

如果值一直为0，可能是因为你给一个没有滚动条的元素设置滚动条的位置。

什么时候存在滚动条？页面布局我们可以简单理解为 div盒子套div盒子。当内侧div盒子的高度大于外部时，外部的div就会出现滚动条。此时外部的div才具备scrollTop属性，否则你无论如何设置都为0.

当内容超出时，body上会自动产生一个滚动条，如何删除body的滚动条，保留某个div的滚动条。

body{overflow:hidden;}div{height:xxpx;    //小于子元素的高度overflow-y:auto;}

document.body.scrollTop的值总为零有时我们获取document.body.scrollTop的值一直为0，这是因为浏览器的差异性各浏览器下 scrollTop的差异

IE：

 对于没有doctype声明的页面，使用  document.body.scrollTop 或 document.documentElement.scrollTop； 

 对于有doctype声明的页面，则使用 document.documentElement.scrollTop；

Chrome、Firefox： 

 对于没有doctype声明的页面，使用  document.body.scrollTop 来获取 scrollTop高度 ； 

 对于有doctype声明的页面，则使用 document.documentElement.scrollTop； 

Safari: 

 safari 比较特别，有自己获取scrollTop的函数 ：window.pageYOffset ； 

解决各浏览器下 scrollTop的差异

可以封装一个函数去获取值

function getScroll(){     return {   left: window.pageXOffset || document.documentElement.scrollLeft|| document.body.scrollLeft || 0,    top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0  };}

offsetTop值一直为0

有时我们需要获取，某个元素到浏览器顶部的距离，我们会用offsetTop。但有时其值一直为0。

我们要理解，offsetTop是表示该元素到父元素顶部的距离。ele.offsetParent.offsetTop   某个元素的父元素距离其父元素的距离

要获取DOM元素到页面顶部的距离，就是递归将所有的offsetTop加起来。

function getElementToPageTop(el) {  if(el.parentElement) {    return this.getElementToPageTop(el.parentElement) +           el.offsetTop  }  return el.offsetTop}

offsetTop与style.top的区别

• offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。

• offsetTop 只读， style.top 可读写。

• 如果没有给 HTML 元素指定过 top 样式，则 style.top 返回的是undefined。(也就是说内联样式与外联样式和内嵌样式都没有设置style.xx则js是无法设置该元素相应的的style.xx)

offsetHeight, clientHeight,scrollHeight 的区别

• offsetHeight 返回值包含 content + padding + border

• clientHeight 返回值只包含 content + padding，如果有滚动条，也不包含滚动条

• scrollHeight 返回值包含 content + padding + 溢出内容的尺寸

题目：滚动到底部加载更多

学了这么多了，练练手吧。写一个h5的常用功能，滚动到底部加载更多

答案如下：还是希望各位小伙伴能自己敲一下，并考虑兼容性。技术博客看起来简单，但其实自己动手敲还是有很多细节的。

//文档高度function getDocumentTop() {        let bodyScrollTop =document.body? document.body.scrollTop:0;        let documentScrollTop =document.documentElement? document.documentElement.scrollTop:0;        return (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;}//可视窗口高度function getWindowHeight() {       let windowHeight = 0;       if (document.compatMode == "CSS1Compat") {           windowHeight = document.documentElement.clientHeight;       } else {           windowHeight = document.body.clientHeight;       }       return windowHeight;}//滚动条滚动高度function getScrollHeight() {    let bodyScrollHeight =document.body? document.body.scrollHeight:0;    let documentScrollHeight =document.documentElement? document.documentElement.scrollHeight:0;    return (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;}window.onscroll = function () {     //监听事件内容    if(getScrollHeight() == getWindowHeight() + getDocumentTop()){        //当滚动条到底时,这里是触发内容        //异步请求数据,局部刷新dom    }}