如何使用 JavaScript 构建加速滚动效果？

发布于 2024-12-08 21:54:04 字数 703 浏览 2 评论 0原文

我对 javascript 很陌生，你们很多人都知道它，但我发现我所学到的所有东西的实际应用却让我困惑。如果你只给我代码，那可能对我没有帮助；我需要详细了解滚动页面的工作方式和原因。

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

这是一个足够简单的想法，即拥有一个比屏幕区域大的页面，可以通过滚动进行导航，尽管这种方式将确保您一次只能看到一个屏幕。

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

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

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

伪代码

html

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

js



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

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

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

原文

I am new to javascript, which so many of you know, and I am finding that the actual application of all the things I learned evades me. If you just give me the code, that probably won't help me; I need a break down of how and why things work as far as scrolling a page.

The idea is to start on page one. So I need a function that will start on page one. There is an arrow facing up, down, left, and right. Clicking them will smooth scroll you to the direction indicated.

It's a simple enough idea, the thought of having a page larger than the screen area that can be navigated through scrolling, albeit in a fashion that will ensure you only see one screen at a time.

I have an idea of the things I would need, but I am not exactly sure.

I will need to determine the size of each portion of the page that will be scrolled to. With this, I determine the distance to scroll and which direction.

I then need to build the actual function that scrolls in the appropriate direction.

pseudo-code

html

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

js



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

Then I somehow need to stop the function. Since each arrow will get an onClick event handler (I think that's the proper terminology) then I can build 4 functions. One for scrolling right, left, etc. and use them with the appropriate arrows.

But how do I actually do it and am I on the right track?

分享到QQ

分享到微博