HTML滚动:跳转到页面的结束(水平)w/javascript

html scrolling: jump to end of page (horizontal) w/javascript?

本文关键字：水平 结束 javascript 滚动 HTML      更新时间：2023-09-26

是否有脚本将页面跳转到水平端

用户可以按键盘上的"Home"answers"End"键跳转到网页的顶部和底部，但是右和左呢?

如何避免用户滚动到x滚动的深度

水平滚动在某种程度上是不常见的情况，因为浏览器自然会尝试垂直滚动，除非不可调整大小的元素真的溢出了可见区域;因此，我将假设您更多地采用显式水平设计，例如:http://webdesignledger.com/inspiration/40-of-the-best-horizontal-scrolling-websites

在任何情况下，基本都是一样的:捕捉一些键*事件，然后做你想做的。

捕获事件并启动滚动函数:

document.body.addEventListener('keydown', scrollfct, true);

第一个警告:'keypress'不能捕获特殊字符，如up/down等，所以使用'keydown'或'keyup'

现在滚动功能:

function scrollfct(e) {
   console.log(evt.keyCode); /* this will debug that your function is being called, and will help you get the keyCodes you want. Remove in production :-) */
   var HOME_LEFT = 33; //HOME
   var HOME_RIGHT = 34; //END
   if (e.keyCode == HOME_LEFT) {
       window.scroll(0,0);
   };
   if (e.keyCode == HOME_RIGHT) {
       window.scroll(document.body.scrollWidth,0);
   }
}

窗口。滚动文档:https://developer.mozilla.org/en/Window.scroll

第二个警告:要完全跨浏览器，你必须做一些功课。

如果你也想处理鼠标滚轮，或者想要一些平滑的滚动，看看这个:http://paulicio.us/items/view/24/horizontal-page-scrolling-using-javascript或jQuery: http://tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizontal-page-scrolling-with-jquery/或只是使用HTML5 CSS过渡

通常我会说，分页可以让用户避免到处滚动，但是还有其他一些技术。你可以包括一个"右"按钮，链接到页面右边的某个东西的ID。这会让他们立刻跳过去。它看起来像这样

<a href="#overtotheright">Goto the Right</a>
. . .
<div id="overtotheright"> . . . </div>

或者在javascript中，下面的代码应该可以工作。

window.scrollTo(document.body.scrollWidth, 0);
相关文章：