如何设置最大滚动位置？答案

【问题标题】：How to set max scroll position?如何设置最大滚动位置？
【发布时间】：2014-05-11 13:41:39
【问题描述】：

假设我们将页面的主体宽度设置为 2000 像素，内容在主体内部水平居中，宽度设置为 1200 像素。

<body>
    <div class="content"></div>
</body>

CSS：

body {
    width: 2000px;
}
.content {
    position: relative;
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

我想要实现的是我根本不允许水平滚动，直到你窗口大小为 1200px 或更小（调整大小时），将 overflow-x 设置为隐藏。

$(function() {
    $(window).resize(function() {
        if(window.innerWidth > 1200) {
            $("body").css({
                "overflow-x": "hidden"
            });
        } else {
            $("body").css({
                "overflow-x": "visible"
            });
        }
    });
});

效果很好。但是如果用户的窗口宽度小于 1200 像素，我也想阻止用户滚动超过 1200 像素（这里的问题是，只要窗口宽度小于 1200 像素，就可以滚动到全宽 - 2000 像素）。

那么你将如何解决这个问题？

【问题讨论】：

所以基本上你希望内容固定在1200px，margin-left 的400px，直到屏幕尺寸缩小到1200px？
不，我不希望将 margin-left 设置为 400px，将其设置为 auto 以便内容始终居中。

标签： javascript jquery html css

【解决方案1】：

在这种情况下，您可以使用 scrollLeft 属性：

onScroll = function (e){
   var maxScroll=1200
   if(e.target.scrollLeft>maxScrollLeft){
     e.target.scrollLeft=maxScrollLeft 
   }
}

【讨论】：

【解决方案2】：

如果我正确理解了您的问题，那么我相信可以通过向您的正文标签添加最大宽度样式来解决此问题。这为我消除了侧卷轴。

body {
    max-width: 2000px;  
}

【讨论】：

如果您将最大宽度设置为 2000 像素，那么您将能够滚动到 2000 像素。我希望正文宽度为 2000 像素，但只允许滚动到 1200 像素。
在这种情况下，我认为你不需要给身体一个宽度。如果将其留空，则用户的窗口大小应决定正文大小。然后滚动不会受到影响。你能详细说明为什么你需要这么宽的背景吗？更多信息将有助于解决问题。
我需要一个固定大小，因为我不希望图片（覆盖主体）响应窗口大小，而不是始终居中（图片不应变小或变大） .这也是为什么我需要这么宽的身体的原因 - 因为图片。