快捷導(dǎo)航

js控制滾動(dòng)條滾動(dòng)的兩種簡(jiǎn)單方法

更新時(shí)間：2023年07月10日 15:23:29 作者：前端程序猿i

這篇文章主要給大家介紹了關(guān)于js控制滾動(dòng)條滾動(dòng)的兩種簡(jiǎn)單方法,通過(guò)JavaScript可以直接控制滾動(dòng)條的位置,從而達(dá)到鎖定滾動(dòng)條的效果,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下

方法一

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

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

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

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

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

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

方法二

獲取滾動(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)用示例