谈谈web中的scroll(滚动)

前言

本文用到的Web Api有绝对滚动element.scrollTo()、相对滚动element.scrollBy()、滚动到指定元素element.scrollIntoView()

场景

1. 滚动到顶部

window.scrollTo(0, 0);

2. 滚动到底部

window.scrollTo(0, document.documentElement.offsetHeight);

3. 平滑滚动到顶部

window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });

4. 平滑滚动到底部

window.scrollTo({ top: document.documentElement.offsetHeight, left: 0, behavior: 'smooth' });

5. 控制其他元素节点(textarea、div)

let elem = document.querySelector('textarea/div');
let height = elem.offsetHeight;
elem.scrollTo({ top: height, left: 0, behavior: 'smooth' });

6. 相对当前滚动条位置滚动

window.scrollBy({ top: 100, left: 0, behavior: 'smooth' });

7. 滚动到指定元素

let elem = document.querySelector(selector);
// 使元素出现在视窗顶部
elem.scrollIntoView({ block: 'start' });
// 使元素出现在视窗中间
elem.scrollIntoView({ block: 'center' });
// 使元素出现在视窗底部
elem.scrollIntoView({ block: 'end' });
// 加过渡动画
elem.scrollIntoView({ behavior: 'smooth' });

8. 滚动到锚点位置

<!-- 导航 -->
<ul class="nav">
  <li><a href="#intro">介绍</a></li>
  <li><a href="#pro">产品</a></li>
  <li><a href="#about">关于我们</a></li>
</ul>

<!-- 内容 -->
<ul class="content-list">
  <li id="intro"></li>
  <li id="pro"></li>
  <li id="about"></li>
</ul>

9. 平滑滚动到锚点位置

方案一

将上面的html代码改成

<ul class="nav">
  <li onclick="scrollToTarget('#intro');">介绍</li>
  <li onclick="scrollToTarget('#pro');">产品</li>
  <li onclick="scrollToTarget('#about');">关于我们</li>
</ul>

<ul class="content-list">
  <li id="intro"></li>
  <li id="pro"></li>
  <li id="about"></li>
</ul>

javascript

function scrollToTarget(target) {
  let elem = document.querySelector(target);
  elem.scrollIntoView({behavior: 'smooth'});
  return elem;
}

方案二

html结构保持最初的不变( 锚点 )，然后加个终极平滑过渡 ( 详情看下面 )

10. 终极平滑过渡

给需要平滑滚动的元素加上此样式，一般指父元素 ( 该样式可以使本文所有添加过渡的javascript代码都省略 )

body {
  scroll-behavior: smooth;
}

其他元素需要自行继承、设置

.scroll-box {
  scroll-behavior: inherit;
}

11. 移动端丝滑滚动
当大家对一个元素设置overflow: auto；的时候，在移动端滚动会发现非常僵硬，加下面样式即可解决

.scroll-box {
  -webkit-overflow-scrolling: touch;
}

12. 自定义滚动条样式

::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-thumb {
  background-color: hsla(220, 4%, 58%, .3);
  border-radius: 10px;
}

::-webkit-scrollbar /* 滚动条整体部分 */
::-webkit-scrollbar-thumb /* 滚动条内的小方块 */
::-webkit-scrollbar-track /* 滚动条轨道 */
::-webkit-scrollbar-button /* 滚动条轨道两端按钮 */
::-webkit-scrollbar-track-piece /* 滚动条中间部分，内置轨道 */
::-webkit-scrollbar-corner /* 边角，两个滚动条交汇处 */
::-webkit-resizer /* 两个滚动条的交汇处上用于通

13. 获取当前滚动条的x、y值

let { scrollX, scrollY } = window.scroll;

14. 封装滚动条是否滚动到底部函数

let onReachBottom = function (callback) {
  window.onscroll = function () {
    // 滚动高度 + 视窗高度 >= 内容高度
    let isBottom = window.scrollY + document.documentElement.clientHeight >= document.body.clientHeight;
    if (isBottom) {
      callback && callback();
    }
  }
}

onReachBottom(function () {
  console.log('已经到底部啦!')
})