我正在尝试在网页上实现一些代码,以在加载页面后自动滚动。我使用Javascript函数来执行自动滚动,并在页面加载时调用我的函数,但页面仍然滚动不顺畅!有什么办法可以自动平滑地滚动我的页面吗?
这是我的 Javascript 函数:
function pageScroll() {
window.scrollBy(0,50); // horizontal and vertical scroll increments
scrolldelay = setTimeout('pageScroll()',100); // scrolls every 100 milliseconds
}
这并不平滑,因为滚动每 100 毫秒增加 50。
将其以及您滚动的数量更改为较小的数字,以使函数运行时产生更加“平滑”的错觉。
调低速度量以使其更快或更慢。
function pageScroll() {
window.scrollBy(0,1);
scrolldelay = setTimeout(pageScroll,10);
}
看起来会更流畅,试试吧;)
尝试使用 jQuery,以及这段代码:
$(document).ready(function(){
$('body,html').animate({scrollTop: 156}, 800);
});
156 - 从页面顶部滚动到 (px) 的位置。
800 - 滚动持续时间(毫秒)
您可能想查看 jQuery ScrollTo 插件的源代码,该插件可以平滑滚动。或者甚至可能只是使用插件而不是滚动你自己的函数。
动画运行是否流畅取决于客户端机器。无论您的代码多么公平,您都永远不会对动画在 128 MB RAM 系统上运行的方式感到满意。
以下是如何使用 jQuery 进行滚动:
$(document).scrollTop("50");
您可能还想尝试AutoScroll Plugin。
您可以使用
jfunc
功能来执行此操作。
使用 jFunc_ScrollPageDown
和 jFunc_ScrollPageUp
功能。
http://jfunc.com/jFunc-Functions.aspx。
既然您已将问题标记为“jquery”,为什么不尝试类似
.animate()
的内容呢?这个特殊的 jquery 函数旨在平滑地为各种属性设置动画,包括数字 CSS 属性以及滚动位置。
数字是硬编码的,但想法是逐项移动(标题为 52px),当下降时,返回
let elem = document.querySelector(".spfxBirthdaysSpSearch_c7d8290b ");
let lastScrollValue = 0
let double_lastScrollValue = 0
let scrollOptions = { top: 79, left: 0, behavior: 'smooth' }
let l = console.log.bind(console)
let intScroll = window.setInterval(function() {
double_lastScrollValue = lastScrollValue //last
lastScrollValue = elem.scrollTop // after a scroll, this is current
if (double_lastScrollValue > 0 && double_lastScrollValue == lastScrollValue){
elem.scrollBy({ top: elem.scrollHeight * -1, left: 0, behavior: 'smooth' });
} else {
if (elem.scrollTop == 0){
elem.scrollBy({ top: 52, left: 0, behavior: 'smooth' });
} else {
elem.scrollBy(scrollOptions);
}
}
}, 1000);
这是对此的另一种看法,使用
requestAnimationFrame
。它使您可以控制滚动时间,并支持缓动功能。它非常强大,但公平警告:用户无法中断滚动。
// Easing function takes an number in range [0...1]
// and returns an eased number in that same range.
// See https://easings.net/ for more.
function easeInOutSine(x) { return -(Math.cos(Math.PI * x) - 1) / 2; }
// Simply scrolls the element from the top to the bottom.
// `elem` is the element to scroll
// `time` is the time in milliseconds to take.
// `easing` is an optional easing function.
function scrollToBottom(elem, time, easing)
{
var startTime = null;
var startScroll = elem.scrollTop;
// You can change the following to scroll to a different position.
var targetScroll = elem.scrollHeight - elem.clientHeight;
var scrollDist = targetScroll - startScroll;
easing = easing || (x => x);
function scrollFunc(t)
{
if (startTime === null) startTime = t;
var frac = (t - startTime) / time;
if (frac > 1) frac = 1;
elem.scrollTop = startScroll + Math.ceil(scrollDist * easing(frac));
if (frac < 0.99999)
requestAnimationFrame(scrollFunc);
}
requestAnimationFrame(scrollFunc);
}
// Do the scroll
scrollToBottom(document.getElementById("data"), 10000, easeInOutSine);
用它来滚动SmoothToBottom
$(document).ready(function(){
const scrollingElement = (document.scrollingElement || document.body);
const scrollSmoothToBottom = () => {
$(scrollingElement).animate({
scrollTop: document.body.scrollHeight,
}, 500);
}
scrollSmoothToBottom();
})