目录
- 方法一
- 方法二
- 总结
方法一
JavaScript 可以通过操作scrollTop属性来控制元素的滚动，以下是一个简单的示例代码：
var element = document.getElementById(\’myElement\’); // 获取需要滚动的元素
element.scrollTop = 100; // 滚动到距离顶部100像素的位置
在上面的示例中，首先通过document.getElementById获取需要滚动的元素，然后设置scrollTop属性为需要滚动到的位置，即可实现控制滚动条滚动。
如果需要平滑滚动，可以使用window.requestAnimationFrame方法来实现动画效果，示例代码如下：
var element = document.getElementById(\’myElement\’); // 获取需要滚动的元素
var targetPosition = 100; // 滚动到距离顶部100像素的位置
var duration = 500; // 滚动动画的持续时间（毫秒）
var startTime = null; // 动画开始时间
function scrollTo(timestamp) {
if (!startTime) startTime = timestamp;
var progress = timestamp – startTime;
var position = Math.min(progress / duration * targetPosition, targetPosition);
element.scrollTop = position;
if (progress < duration) {
window.requestAnimationFrame(scrollTo);
}
}
window.requestAnimationFrame(scrollTo); // 开始滚动动画
在上面的示例中，首先获取需要滚动的元素和目标位置，然后设置动画的持续时间。在scrollTo函数中，通过计算当前进度和位置，来实现平滑的滚动效果。在滚动动画未完成时，调用window.requestAnimationFrame方法来继续滚动，直到动画完成为止。
方法二
获取滚动距离
window.addEventListener(\’scroll\’, () => {
scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
})
const ScrollTop = (number = 0, time) => {
if (!time) {
document.body.scrollTop = document.documentElement.scrollTop = number;
return number;
}
const spacingTime = 20; // 设置循环的间隔时间 值越小消耗性能越高
let spacingInex = time / spacingTime; // 计算循环的次数
let nowTop = document.body.scrollTop + document.documentElement.scrollTop; // 获取当前滚动条位置
let everTop = (number – nowTop) / spacingInex; // 计算每次滑动的距离
let scrollTimer = setInterval(() => {
if (spacingInex > 0) {
spacingInex–;
ScrollTop(nowTop += everTop);
} else {
clearInterval(scrollTimer); // 清除计时器
}
}, spacingTime);
}
调用示例
ScrollTop(scrollTop, 500)
总结
到此这篇关于js控制滚动条滚动的两种简单方法的文章就介绍到这了,更多相关js控制滚动条滚动内容请搜索悠久资源网以前的文章或继续浏览下面的相关文章希望大家以后多多支持悠久资源网！
您可能感兴趣的文章:
- js控制滚动条缓慢滚动到顶部实现代码
- js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
- 原生JS控制多个滚动条同步跟随滚动效果
- js实现控制整个页面滚动条的位置
