js的window.scroll怎么用

发布网友发布时间：2022-04-23 02:09

共2个回答

懂视网时间：2022-05-14 22:29

这篇文章主要介绍了关于原生JS基于window.scrollTo()封装垂直滚动动画工具函数，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

概要：

原生JS基于window.scrollTo()封装垂直滚动动画工具函数，可应用与锚点定位、回到顶部等操作。

封装原因：
在vue项目中，遇到需要实现垂直滚动效果的需求，初步想到的方法有两个：
1：使用window.scrollTo()方法，但是这个方法是没有动画效果的，需要手动封装一下。
2：使用JQuery的动画函数，缺点比较明显：需要引入JQuery。
显然，选择第一种好很多。

以下为封装window.scrollTo()的方法scroll()，文件名为scroll.js

// Created by xiaoqiang on 30/05/2018.
/**
 * @param {numeber} currentY 需要移动的dom当前位置离网页顶端的距离
 * @param {number} targetY 需要移动的dom当前位置离要移到的位置的距离
 */
function scroll (currentY, targetY) {
 // 计算需要移动的距离
 let needScrollTop = targetY - currentY
 let _currentY = currentY
 setTimeout(() => {
 // 一次调用滑动帧数，每次调用会不一样
 const dist = Math.ceil(needScrollTop / 10)
 _currentY += dist
 window.scrollTo(_currentY, currentY)
 // 如果移动幅度小于十个像素，直接移动，否则递归调用，实现动画效果
 if (needScrollTop > 10 || needScrollTop < -10) {
 scroll(_currentY, targetY)
 } else {
 window.scrollTo(_currentY, targetY)
 }
 }, 1)
}
// 暴露此方法
export default scroll

使用方法

比如在vue中，可以这样用：
import scroll form '@/common/util/scroll.js'
随后在响应触发事件的函数中调用scroll()，需要传入两个参数，比如：

 methods: {
 test () {
  const scrollHeight = document.getElementsByClassName('scroll-element')[0].offsetTop
  const currentY = document.documentElement.scrollTop || document.body.scrollTop
  scroll(currentY, scrollHeight)
 }
 }

有错误或不清晰或可以改进的地方欢迎指出，O(∩_∩)O~~

热心网友时间：2022-05-14 19:37

1、onscroll

解释：当元素的滚动条滚动时触发的事件。

onscroll事件貌似任何实体元素都可以绑定，这里的实体元素包括DOM元素、window元素、document元素。

用法即：element.onscroll=function(){};

需要注意的是，滚动条一定要出现，而且滚动条是属于这元素的，例如：

1 <div id="wrap" style="height:100px;overflow:auto;">
2 <div id="inner" style="height:200px;">content</div>
3 </div>

因为外层wrap的高度小于内层inner的高度，所以当设置overflow:auto时会出现滚动条，当拖动滚动条时就会触发wrap的onscroll事件，而不是inner的onscroll事件，即这滚动条属于wrap而不是属于inner，明白这点十分重要，对下面理解的scrollTop、scrollHeight一样道理。

2、scrollTop

解释：元素滚动条内的顶部隐藏部分的高度。

scrollTop属性只有DOM元素才有，window/document没有。

用法1：获取值 var top = element.scrollTop;//返回数字，单位像素

用法2：设置值 element.scrollTop = 200;

对上面的例子来说，控制滚动条的位置是wrap.scrollTop=xx;而不是inner.scrollTop，道理同上。

兼容性问题：获得整个文档scrollTop，IE是document.documentElement.scrollTop，FF/CH则是document.body.scrollTop.

3、scrollHeight

解释：元素滚动条内的内容高度。

scrollHeight同scrollTop属性一样，只有DOM元素才有，window/document没有。

不同的是scrollHeight是只读，不可设置。

兼容性问题：获取整个文档scrollHeight，IE/FF/CH都可以通过document.documentElement.scrollHeight或document.body.scrollHeight获得。

此外还有scrollLeft，scrollWidth，道理是一样的。

4、关于window.scroll()，window.scrollBy()，window.scrollTo()

这3个是全局函数，最新的IE/FF/CH都支持。

window.scroll(x,y)是让window滚动条滚动到那个x,y坐标。//x是水平坐标，y是垂直坐标。

window.scrollBy(-x,-y)是让window滚动条相对滚动到某个坐标，- 10即相对向左/向上滚动10像素。

window.scrollTo(x,y)和window.scroll(x,y)一样。