如何仅使用 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屋！