javascript - 如何使用 javascript 构建加速滚动效果?

标签 javascript onclick scroll smoothing acceleration

我是 javascript 的新手,你们很多人都知道,我发现我所学的所有东西的实际应用都在逃避我。如果你只是给我代码,那可能对我没有帮助;就滚动页面而言,我需要详细说明事情的运作方式和原因。

我们的想法是从第一页开始。所以我需要一个从第一页开始的功能。有一个向上、向下、向左和向右的箭头。单击它们将使您平滑地滚动到指示的方向。

这是一个非常简单的想法,即拥有一个大于屏幕区域的页面,可以通过滚动来导航,尽管以一种确保您一次只能看到一个屏幕的方式。

我知道我需要什么,但我不确定。

我需要确定要滚动到的页面的每个部分的大小。有了这个,我确定滚动的距离和方向。

然后我需要构建在适当方向滚动的实际函数。

伪代码

html

<div id="arrowRight" onClick="scrollRight">

js



  function scrollRight()
  {
  window.scrollBy("widthOfCurrentPage",0);
  setTimeout("scrollScroll()", 100);
  }

然后我需要以某种方式停止该功能。由于每个箭头都将获得一个 onClick 事件处理程序(我认为这是正确的术语),因此我可以构建 4 个函数。一个用于向右、向左滚动等,并与适当的箭头一起使用。

但实际上我该怎么做,是否走在正确的轨道上?

最佳答案

听起来你的方向是对的,youngpup 有一些很好的例子,他的评论会帮助你理解它是如何工作的,并指导你 http://www.youngpup.net/projects/ypSimpleScroll/

关于javascript - 如何使用 javascript 构建加速滚动效果?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7712096/

相关文章:

asp.net - 从按钮调用 JavaScript 和 C# 函数

jquery - 使用slideup时如何防止网页滚动回顶部?

javascript - 评估 JavaScript 代码中的 Elisp 表达式

javascript - 绘制始终指向远离对象的箭头

javascript - Node.js 添加 'semi-dynamic' 内容的最佳方式

Vim 滚动而不改变光标在屏幕上的位置

javascript - 在 React js 中检测滚动方向

javascript - HTML 中的颜色选择器对话框

javascript - 如何使用 JavaScript 停用带有 onClick 事件的图像? (处理浏览器扩展)

android - 找不到使用android的方法:onclick