目錄 方法一 方法二總結(jié) 方法一

JavaScript 可以通過操作 scrollTop 屬性來控制元素的滾動(dòng)，以下是一個(gè)簡單的示例代碼：

var element = document.getElementById('myElement'); // 獲取需要滾動(dòng)的元素element.scrollTop = 100; // 滾動(dòng)到距離頂部100像素的位置

在上面的示例中，首先通過 document.getElementById 獲取需要滾動(dòng)的元素，然后設(shè)置 scrollTop 屬性為需要滾動(dòng)到的位置，即可實(shí)現(xiàn)控制滾動(dòng)條滾動(dòng)。

如果需要平滑滾動(dòng)，可以使用 window.requestAnimationFrame 方法來實(shí)現(xiàn)動(dòng)畫效果，示例代碼如下：

var element = document.getElementById('myElement'); // 獲取需要滾動(dòng)的元素var targetPosition = 100; // 滾動(dòng)到距離頂部100像素的位置var duration = 500; // 滾動(dòng)動(dòng)畫的持續(xù)時(shí)間（毫秒）var startTime = null; // 動(dòng)畫開始時(shí)間 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); // 開始滾動(dòng)動(dòng)畫

在上面的示例中，首先獲取需要滾動(dòng)的元素和目標(biāo)位置，然后設(shè)置動(dòng)畫的持續(xù)時(shí)間。在 scrollTo 函數(shù)中，通過計(jì)算當(dāng)前進(jìn)度和位置，來實(shí)現(xiàn)平滑的滾動(dòng)效果。在滾動(dòng)動(dòng)畫未完成時(shí)，調(diào)用 window.requestAnimationFrame 方法來繼續(xù)滾動(dòng)，直到動(dòng)畫完成為止。

方法二

獲取滾動(dòng)距離

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; // 設(shè)置循環(huán)的間隔時(shí)間 值越小消耗性能越高 let spacingInex = time / spacingTime; // 計(jì)算循環(huán)的次數(shù) let nowTop = document.body.scrollTop + document.documentElement.scrollTop; // 獲取當(dāng)前滾動(dòng)條位置 let everTop = (number - nowTop) / spacingInex; // 計(jì)算每次滑動(dòng)的距離 let scrollTimer = setInterval(() => { if (spacingInex > 0) { spacingInex--; ScrollTop(nowTop += everTop); } else { clearInterval(scrollTimer); // 清除計(jì)時(shí)器 } }, spacingTime);}

調(diào)用示例

ScrollTop(scrollTop, 500)總結(jié)

到此這篇關(guān)于js控制滾動(dòng)條滾動(dòng)的兩種簡單方法的文章就介紹到這了,更多相關(guān)js控制滾動(dòng)條滾動(dòng)內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！