js控制滚动条滚动的两种简单方法
- 技术交流
- 2024-10-01 11:31:01
目录
- 方法一
- 方法二
- 总结
方法一
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 = timest 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控制滚动条滚动的两种简单方法”