js控制滾動條滾動的兩種簡單方法

目錄 方法一 方法二 總結 方法一 JavaScript 可以通過操作 scrollTop 屬性來控制元素的滾動，以下是一個簡單的示例代碼： var element = document.getElementById('myElement'); // 獲取需要滾動的元素e

目錄

• ?方法一
• ?方法二
• 總結

?方法一

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控制滾動條滾動內容請搜索技圈網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持技圈網！