如何使window.scrollTo（）具有平滑效果
我可以使用以下内容滚动到200px
btn.addEventListener("click", function(){
window.scrollTo(0,200);
})
但是我想要一个平滑的滚动效果。我该怎么做呢？
问题答案：
现在，您可以使用window.scrollTo({ top: 0, behavior: 'smooth' })来平滑滚动页面。
const btn = document.getElementById('elem');
btn.addEventListener('click', () => window.scrollTo({
top: 400,
behavior: 'smooth',
}));
#x {
height: 1000px;
background: lightblue;
}
<div id='x'>
<button id='elem'>Click to scroll</button>
</div>
较旧的解决方案
您可以执行以下操作：
var btn = document.getElementById('x');
btn.addEventListener("click", function() {
var i = 10;
var int = setInterval(function() {
window.scrollTo(0, i);
i += 10;
if (i >= 200) clearInterval(int);
}, 20);
})
body {
background: #3a2613;
height: 600px;
}
<button id='x'>click</button>
ES6 递归方法：
const btn = document.getElementById('elem');
const smoothScroll = (h) => {
let i = h || 0;
if (i < 200) {
setTimeout(() => {
window.scrollTo(0, i);
smoothScroll(i + 10);
}, 10);
}
}
btn.addEventListener('click', () => smoothScroll());
body {
background: #9a6432;
height: 600px;
}
<button id='elem'>click</button>
-
我有5刷屏幕和我的代码只是停留在第三个屏幕我想水平滚动。
-
问题内容： 我们中的某些人可能不希望使用现成的插件，因为它们的尺寸很大，并且可能与当前的javascript产生冲突。 我以前使用过轻型滑块插件，但是当客户进行模块化修改时，就变得很难操作。然后，我的目标是建立易于定制的地雷。我认为滑块从一开始就不应该那么复杂。 什么是构建jQuery图像滑块的简单干净的方法？ 问题答案： 在检查示例之前，您应该了解我最常用的两个jQuery函数。 index（）
-
实现右滑返回上个视图，滑动的时候具有视差效果。具体效果就是，向右滑动当前视图时，当前视图会往右滑动，当前视图的底部视图也会往右边滑动，但是当前视图滑动速度快于底部视图，从而造成一种视差效果（Parallax），当上面的视图滑动到最右边隐藏之后，底部的视图就完全露出来。 [Code4App.com]
-
是否可以在 JavaFX 2.2 中的 ImageView 中渲染缩放后的图像而不应用任何平滑？我正在使用setSmooth（false）将50x50图像渲染为200x200 ImageView，因此源图像中的每个像素都应映射到屏幕上的4x4正方形。 但是，生成的渲染仍然在所有16个目标像素上平滑源像素。有没有人知道一种方法可以做到这一点，而无需手动将每个像素复制到新图像中？
-
问题内容： 如何才能平滑地为画布创建缩放动画？GWT提供了一种获取滚轮数量的方法和。 这里的问题是，每个车轮运动都会执行此方法，并且如果我在该方法本身中调用画布重绘，事情会变得很滞后。 因此，我想到了以某种方式制作缩放动画的方法。但是如何？ 我考虑过创建一个，但没有真正的主意，因为只有mousewheelevent作为起点，而用户没有完成用滚轮缩放的终点… 问题答案： 这是我用来缩放图像的可伸缩图