Skip to main content

设置页面滚动

获取滚动条位置的兼容​

  • 获取当前页面滚动条纵坐标的位置：document.body.scrollTop与document.documentElement.scrollTop
  • 获取当前页面滚动条横坐标的位置：document.body.scrollLeft与document.documentElement.scrollLeft
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

浏览器​

谷歌浏览器只认识document.body.scrollTop

设置页面滚动方法​

  • 方法一：window.scrollTo(x,y)
  • 方法二：scrollTop/scrollLeft

window.scrollTo(x,y)​

预览：demo

<div id="wrap">
  <div id="content"/>
</div>
#wrap{
  width:200px;
  height:200px;
  overflow:auto;
}
#content{
  width:500px;
  height:500px;
  background:grey;
}
const wrap = document.getElementById('wrap')
wrap.scrollTo(150,150)

scrollTop/scrollLeft​

预览：demo

<div id="wrap">
  <div id="content"/>
</div>
#wrap{
  width:200px;
  height:200px;
  overflow:auto;
}
#content{
  width:500px;
  height:500px;
  background:grey;
}
const wrap = document.getElementById('wrap')
wrap.scrollTop = 150
wrap.scrollLeft = 150

滚动指定区域​

const handleCurrentTop = () => {
    const listWrap = document.getElementById('listWrap');
    const current = listWrap.childNodes[currentIndex];

    // 滚动条到达底部 return
    if (listWrap.scrollTop + listWrap.clientHeight >= listWrap.scrollHeight) {
        // alert('到底');

        return;
    }
    // console.log(listWrap.height, current.offsetTop);
    if (listWrap.scrollTop < current.offsetTop) {
        window.requestAnimationFrame(handleCurrentTop);

        listWrap.scrollTop += 8;
    } else {
        return; // 必须立即return！
    }
}

移动端滚动​

需求：在一个区域内只允许部分区域产生滚动的效果，而其余部分不能移动

把这个需求分解为两个小的问题来解决

  • 部分区域固定
    • 为页面的body部分设置height: 100%以及overflow: hidden，即禁用页面原生的滚动，保证只会显示一屏的内容。
    • 固定区域采用绝对定位。
  • 其余区域滚动
    • 核心属性overflow-y

卡顿优化​

在ios设备中，利用overflow来模拟滚动会出现卡顿的情况，可以通过设置x来解决，原因是设置后ios会为其创建一个UIScrollView，利用硬件来加速渲染。

参考​

overflow滚动条无效 html无法滚动解决方案 html - 为什么我的页面无法滚动？ flex-end为什么overflow无法滚动及解决方法 Element.scrollTop js基础-获取滚动条位置的兼容 移动端实现内滚动的4种方案 document.body.scrollTop指定位置失效解决办法 scrollTo与scrollTop及其区别 如何不择手段提升scroll事件的性能 -webkit-overflow-scrolling:touch介绍和碰到的坑 深入研究-webkit-overflow-scrolling:touch及ios滚动 移动端-webkit-overflow-scrolling:touch属性导致页面卡住 探究ios -webkit-overflow-scrolling:touch偶尔卡住或不能滑动的bug