[javascript]如何優雅的實現網頁自動滾動

月神的使者發表於2024-07-07
JavaScript網頁

在設計一些網站的時候，考慮到使用者騰不開手，不想動的情況，就需要設計一個自動滾動的功能，我不提供gui介面的設計，只提供一個絲滑滾動的原始碼

let scrollPercentage = 0.02; // 這個變數就是一秒滾動這個滾動節點的視窗的百分之幾
let scrollState = false; // true為正在滾動
let scrollElement = document.documentElement; // 滾動節點
let toggleScroll = (() => { // 製造一個閉包避免變數汙染環境
	let lastDistance = 0; // 滾動距離必須是整形，如果有小數則會被忽略，我就將小數存起來，然後取整
	let lastTime = 0;
	function scroll() {
		if(!scrollState) { // 取消後停止
			return;
		}
		let height = Math.min(window.innerHeight, scrollElement.getBoundingClientRect().height); // 視窗高度
		let time = (Date.now() - lastTime) / 1000; // 過了幾秒
		lastDistance += height * scrollPercentage * time; // 計算總滾動高度
		let distance = Math.floor(lastDistance); 
		lastDistance -= distance; // 取整，小數留給下一幀
		scrollElement.scrollTo({top: scrollElement.scrollTop + distance, behavior: "instant"}); // 立即滾動，避免css影響
		lastTime = Date.now();
		requestAnimationFrame(scroll); // 等待下一幀
	}
	
	return function() { // toggleScroll函式
		scrollState = !scrollState;
		if(scrollState) {
			lastTime = Date.now();
			requestAnimationFrame(scroll);
		}
	};
})()

相關文章