jQuery 如何在水平溢出的页面上向右滚动?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/16465454/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 17:11:46  来源:igfitidea点击:

How do I scroll to the right on a page that overflows horizontally?

javascriptjquery

提问by Scott Magdalein

I want to scroll to the far right edge of a page that is really wide (it's wide on purpose) when the user closes a modal (specifically, the Reveal modal in Foundation 4).

当用户关闭模态(特别是 Foundation 4 中的 Reveal 模态)时,我想滚动到非常宽(故意宽)的页面的最右边缘。

I've tried setting an id on a div that's aligned all the way right, but that obviously doesn't work.

我试过在完全对齐的 div 上设置一个 id,但这显然不起作用。

回答by adeneo

To scroll horizontally, you use scrollLeft().

要水平滚动,请使用scrollLeft()

$('body, html').scrollLeft(400);

jQuery also supports animating the scrollLeftproperty.

jQuery 还支持动画scrollLeft属性。

To scroll all the way to the right, you get the full width of the page, and subtract the window width to get the left edge :

要一直向右滚动,您将获得页面的全宽,然后减去窗口宽度以获得左边缘:

var left = $(document).outerWidth() - $(window).width();
$('body, html').scrollLeft(left);

回答by nullability

You actually can do it with a div ID. If you have a div like this:

你实际上可以用一个 div ID 来做到这一点。如果您有这样的 div:

<div id="divid" style="position: absolute; left: 9000px;">Far Right</div>

Then just change your location.hashto match:

然后只需更改您location.hash的匹配:

location.hash = "divid";

The browser will take care of scrolling for you.

浏览器将为您处理滚动。

回答by Maloric

Ok so here is a working example: http://jsfiddle.net/B2aQF/1/

好的,这是一个工作示例:http: //jsfiddle.net/B2aQF/1/

Basically, you can set the left scroll position of the body using jQuery's scrollLeftfunction:

基本上,您可以使用 jQuery 的scrollLeft函数设置 body 的左滚动位置:

$(document).ready(function(){
    $('body').scrollLeft($(document).outerWidth()); 
});

You could even set the scrollLeft to a higher number than you will ever need, as it doesn't overscroll.

您甚至可以将 scrollLeft 设置为比您需要的更高的数字,因为它不会过度滚动。