如何仅使用 Javascript 降低平滑滚动的默认速度? [英] How do I slow down the default speed of smooth scroll using only Javascript?
问题描述
我的目标是按下回车键,让网站滚动到底部.我已将滚动行为设置为平滑,并且一切正常,但平滑滚动的默认速度太快了.我如何减慢速度?下面是我的代码.请不要jquery.谢谢!
document.body.onkeyup = function(e){if(e.keyCode == 13){window.scrollBy(0, window.innerHeight * 8);}};
您无法更改默认滚动速度.
您可以做的是创建自己的滚动功能(没有 jQuery)!
function scrollBy(element, value, duration, easingFunc) {变量开始时间;var startPos = element.scrollTop;var clientHeight = element.clientHeight;var maxScroll = element.scrollHeight - clientHeight;var scrollIntendedDestination = startPos + value;//可能的滚动目的地的上下限var scrollEndValue = Math.min(Math.max(scrollIntendedDestination, 0), maxScroll)//创建递归函数来调用每一帧var 滚动 = 函数(时间戳){开始时间 = 开始时间 ||时间戳;var elapsed = 时间戳 - startTime;element.scrollTop = startPos + (scrollEndValue - startPos) * easingFunc(elapsed/duration);elapsed <= duration &&window.requestAnimationFrame(scroll);};//调用递归函数if (startPos != scrollEndValue) window.requestAnimationFrame(scroll);}var containerEl = document.getElementById("scroll-container");var scrollingDistance = window.innerHeight * 3;var 滚动时间 = 1000;var easeInOutCubic = 函数(t){返回 t <.5 ?4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;}scrollBy(containerEl , scrollingDistance , scrollingTime , easeInOutCubic )
html ,body, #scroll-container {height: 100vh;边距:0;}#scroll-container {溢出-y:滚动;位置:相对;}部分{高度:100%;显示:块;位置:相对;边框顶部:1px 纯黑色;}
<section id="page1">第1页</节><section id="page2">第2页</节><section id="page3">第3页</节><section id="page4">第4页</节>
通过这个,你可以指定你想要滚动的时间.
在示例中,我使用 1000 毫秒,但您可以将其设置为任何您想要的值,或者根据滚动量进行设置
My goal is to press the enter key, and have the site scroll to the bottom. I have set the scroll behavior to smooth and everything works like it should, except the default speed of smooth scrolling is way too fast. How do I slow it down? Below is my code. No jquery please. Thank you!
document.body.onkeyup = function(e){
if(e.keyCode == 13){
window.scrollBy(0, window.innerHeight * 8);
}
};
You can't change the default scrolling speed.
What you can do is create your own scrolling function (with no jQuery)!
function scrollBy(element, value, duration, easingFunc) {
var startTime;
var startPos = element.scrollTop;
var clientHeight = element.clientHeight;
var maxScroll = element.scrollHeight - clientHeight;
var scrollIntendedDestination = startPos + value;
// low and high bounds for possible scroll destinations
var scrollEndValue = Math.min(Math.max(scrollIntendedDestination, 0), maxScroll)
// create recursive function to call every frame
var scroll = function(timestamp) {
startTime = startTime || timestamp;
var elapsed = timestamp - startTime;
element.scrollTop = startPos + (scrollEndValue - startPos) * easingFunc(elapsed / duration);
elapsed <= duration && window.requestAnimationFrame(scroll);
};
// call recursive function
if (startPos != scrollEndValue) window.requestAnimationFrame(scroll);
}
var containerEl = document.getElementById("scroll-container");
var scrollingDistance = window.innerHeight * 3;
var scrollingTime = 1000;
var easeInOutCubic = function(t) {
return t < .5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
}
scrollBy(containerEl , scrollingDistance , scrollingTime , easeInOutCubic )
html ,body, #scroll-container {height: 100vh; margin:0;}
#scroll-container {overflow-y: scroll;position:relative; }
section {height: 100%; display:block; position:relative; border-top: 1px solid black;}
<div id="scroll-container">
<section id="page1">
page1
</section>
<section id="page2">
page2
</section>
<section id="page3">
page3
</section>
<section id="page4">
page4
</section>
</div>
With this you can specify the time you want the scrolling to take.
In the example I use 1000ms but you can set that to anything you want, or set it based on the amount to scroll
这篇关于如何仅使用 Javascript 降低平滑滚动的默认速度?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!