浏览器滚动

迈不过友情╰ 2023-06-03 09:54 23阅读 0赞

## 分类 ##

滚动分`全局滚动(浏览器窗口)`跟`局部滚动(自定义的盒子)`，以下内容绝大部分都是指`全局滚动`，`局部滚动`的话获取`指定的DOM`再调用`相应的API`即可

## 如何设置全局滚动条高度 ##

**1. 最常用的方法：**

window.scrollTo(0, 0)
    // or
    window.scrollTo({
        
      left: 0,
     top: 100
    })

**2. 也可以利用****`相对滚动`设置：**

window.scrollBy(0, 0);
    // or
    window.scrollBy({
        
      left: 0,
     top: 100
    });

**3. 或者利用****`scrollTop`设置：**

document.scrollingElement.scrollTop = 100;
    
    注意：scrollTo跟scrollBy的参数是一样的，区别就是scrollBy滚动距离是相对与当前滚动条位置进行滚动

## 如何指定一个元素显示在视窗 ##

**1. 最常用的方法：**

// 获取元素的offsetTop(元素距离文档顶部的距离)
    let offsetTop = document.querySelector(".box").offsetTop;
    
    // 设置滚动条的高度
    window.scrollTo(0, offsetTop);

**2. 或者用锚点：**

<a href="#box">盒子出现在顶部</a>
    <div id="box"></div>

**3. 或者利用`scrollIntoView`进行展现：**

document.querySelector(".box").scrollIntoView();

还可以指定元素的出现位置：

// start出现在视口顶部、center出现在视口中央、end出现在视口底部
    document.querySelector(".box").scrollIntoView({
        
    block: "start" || "center" || "end"
    });

## 如何设置滚动具有平滑的过渡效果 ##

**1. 利用每个方法的****`参数`设置：**

**2. 或者用`css`属性设置：**

html {
        
      scroll-behavior: smooth; // 全局滚动具有平滑效果
    }
    
    // 或者所有
    * {
        
     scroll-behavior: smooth;
    }
    注意：设置了该属性之后，所有方法都可以不用设置behavior参数了，二选一即可，因为都是控制当前指定元素的滚动行为，所以锚点跳转、设置scrollTop也具有平滑(smooth)的滚动行为

## 一些有趣的东西 ##

#### 1. scrollingElement ####

该对象可以非常`兼容`地获取`scrollTop`、`scrollHeight`等属性，在`移动端`跟`PC端`都屡试不爽?

还记得当初写这个兼容性方法：

let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;

现在你只需要：

let scrollHeight = document.scrollingElement.scrollHeight;

因为在`MDN`中是这样介绍它的：

**标准模式返回`documentElement`，怪异模式返回`body`；**

#### 2. 滚动到底部 ####

window.scrollTo({
        
      left: 0,
      top: document.scrollingElement.scrollHeight
    });
    
    // 如果你实在是懒的话...
    window.scrollTo(0, 999999);

**注意：平滑滚动到`顶部`或者`底部`自己加参数或者属性即可**

#### 3. 判断浏览器已滚动到底部 ####

#### 函数节流（减少代码执行频率）、去抖（判断某个`动作结束`，如刚刚的滚动结束、input输入结束等） ####

#### 6. 解决IOS设备局部滚动不顺畅(粘手) ####

除了浏览器原生滚动，`自定义的滚动条`都会出现这种情况，加以下属性就可以解决：

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

注意：要真机才能看到效果，这里指的局部滚动是指自己定义的盒子，然后设置overflow: auto || scroll;后的滚动行为；

#### 7. 滚动传播 ####

指有多个`滚动区域`，当一个`滚动区域`滚动完之后，继续滚动会`传播到`到父区域继续滚动的行为：

.box {
        
      overscroll-behavior: contain; // 阻止滚动传播
    }

#### 8. 横向滚动 ####

`移动端`遇到此需求比较多，常用于图片展示：

<ul>
      <li>
        <img src="">
      </li>
      // ...
    </ul>
    
    ul {
        
      white-space: nowrap; // 超出不换行
      overflow-x: auto;
    
      li {
        
        display: inline-block;
    
        img {
        
          display: block;
          width: 200px;
        }
      }
    }

#### 9. 滚动结束后，强制滚动到指定元素 ####

基于上面的例子，我们设置如下属性：

ul {
        
      scroll-snap-type: x mandatory;
    
      li {
        
        scroll-snap-align: start;
      }
    }

仔细看会发现，我们松手的时候，会将`最近的元素`滚动到最右边（初始位置，对于Y轴来讲就是顶部，X轴则是右边）

也可以设置出现在中间：

li {
        
    scroll-snap-align: center;
    }

注意：该属性会在你滚动完之后再做处理，也就是说你可以一下子从图片1跳到图片9

## 最后 ##

以上涉及到的方法或属性文档如下

1. scrollTo

2. scrollBy

3. scrollIntoView