当前位置：网站首页>你把浏览器滚动事件玩明白

你把浏览器滚动事件玩明白

2022-08-03 14:00:00 【0.活在风浪里】

第一：设置浏览器滚动条滚动高度

一：相对于页面顶部的距离

二：相对于滚动条的位置开始

三：利用scrollTop设置

效果

第二：设置元素在页面什么位置，滚动条就跑到哪里

一：使用offsetTop （先获取在设置）

二：使用a标签锚点

三：利用scrollIntoView进行展示

前期回顾

vite + vue3 + 封装axios + 封装loading + 封装返回顶部_0.活在风浪里的博客-CSDN博客目前为止我们实现了 axios封装 loading 封装返回顶部封装！本人亲测保证能用，最后祝大家2022越来越强https://blog.csdn.net/m0_57904695/article/details/125891081?spm=1001.2014.3001.5501

奇怪的知识又增加了

念及此，安排一下

第一：设置浏览器滚动条滚动高度

一：相对于页面顶部的距离

// 简写 
 window.scrollTo(0, 0);

// 完整写法
  window.scrollTo({
    left: 0,
    top: 100,
    behavior: "smooth",
  });

// 滚动到底部
window.scrollTo({
  left: 0,
  top: document.scrollingElement.scrollHeight
});

// 如果你实在是懒的话...
window.scrollTo(0, 999999);

二：相对于滚动条的位置开始

 window.scrollBy(0, 0);

||

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

三：利用scrollTop设置

document.scrollingElement.scrollTop = 100;

效果

绝对 window.scrollTo(0, 100);

相对 window.scrollBy(0, 100);

第二：设置元素在页面什么位置，滚动条就跑到哪里

一：使用offsetTop （先获取在设置）

// 获取元素的offsetTop(元素距离文档顶部的距离)
let offsetTop = document.querySelector(".box").offsetTop;

// 设置滚动条的高度
window.scrollTo(0, offsetTop);

二：使用a标签锚点

     <a href="#box">我是a标签</a>

    <!-- 指定name和id都可以 -->
    <div id="box" class="box">我是box盒子</div>

点击a链接 box盒子会跑到页面顶部

html,
body,
#app {
  width: 100%;
  height: 100%;
  
  /* 全局平滑滚动 */
  scroll-behavior: smooth;
}
/* 这里是全局css，也可以单页面加*/

三：利用`scrollIntoView`进行展示

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

// 因为设置了全局平滑滚动，所以这里直接简写，也有滚动动画

第三：判断是否到屏幕底部

思路：给window绑定scroll事件，获取滚动高度和视口高度和文档总高度，判断当前滚动高度 + 视口高度 >= 文档总高度书写逻辑


window.addEventListener("scroll", () => {
  let { scrollTop, scrollHeight, clientHeight } = document.scrollingElement;

  // 当前滚动高度 + 视口高度 >= 文档总高度
  if (scrollTop + clientHeight >= scrollHeight) {
    console.log("已到达底部");
  }
});

第四：函数节流绑定滚动事件

节流会稀释执行频率，在规定的时间里只会执行一次，若在规定时间内重复触发，只有一次生效，简单来说节流重复触发只会执行一次

window.addEventListener("scroll", throttle());

function throttle(fn, interval = 500) {
  let run = true;

  return function () {
    if (!run) return;// 如果正在执行则终止
    run = false;
    setTimeout(() => {
      fn.apply(this, arguments);
      run = true; //执行完打开节流阀
    }, interval);
  };
}

第五：.函数防抖

n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时，简单来说防抖若重复触发会从头开始

window.addEventListener("scroll", debounce());

如果你在监听滚动事件，假设两秒以内用户在不断的频繁的触发onScroll事件，只有用户暂停滚动后，才会去执行响应的操作，代码如下

function debounce(fn, interval = 500) {
  let timer = null;

  return function () {
    clearTimeout(timer ); // 清除未执行的代码，重置回初始化状态
    timer = setTimeout(() => {
       console.log("函数防抖");
    }, interval);
  };
}

第六：解决IOS设备局部滚动不顺畅

除了浏览器原生滚动，自定义滚动条都会出现这个情况，比如overflow: auto || scroll; 后的滚动行为加以下属性就可以解决：

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

第七：利用滚动写轮播

<ul>
  <li>
    <img src="">
  </li>
</ul>

ul {
  white-space: nowrap; // 超出不换行
  overflow-x: auto;
  width:500px;

  li {
   //默认松手最近一张图片会滚动到最右边(初始位置，对于Y轴来讲就是顶部，X轴则是右边)
     //也可以设置出现在中间：
     scroll-snap-align: center;
    img {
      display: block;
      width: 200px;
    }
  }
}