Javascript 如何设置最大滚动位置？_Javascript_Jquery_Html_Css

Javascript 如何设置最大滚动位置？

javascript jquery html css

Javascript 如何设置最大滚动位置？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,假设页面的正文宽度设置为2000px，内容水平居中于正文内部，宽度设置为1200px <body> <div class="content"></div> </body> 我试图实现的是，我不允许任何水平滚动，直到您的窗口大小为1200px或更小（调整大小时），并将overflow-x设置为hidden $(function() { $(window).resize(function() { if(window.

假设页面的正文宽度设置为2000px，内容水平居中于正文内部，宽度设置为1200px

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

我试图实现的是，我不允许任何水平滚动，直到您的窗口大小为1200px或更小（调整大小时），并将overflow-x设置为hidden

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

这很好用。但我还想防止用户在窗口宽度小于1200px时滚动超过1200px（这里的问题是，一旦窗口宽度小于1200px，就有可能滚动到全宽-2000px）

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

如果我正确理解了你的问题，那么我相信可以通过在你的body标签上添加一个max-width样式来解决这个问题。这是我的侧卷轴

body {
    max-width: 2000px;  
}

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

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

因此，基本上你希望内容固定在

1200px

，留有

空白

的

400px

，直到屏幕大小达到

1200px

？不，我不希望留空白设置为400px，设置为“自动”，以便内容始终居中。如果将“最大宽度”设置为2000px，则可以滚动到2000px。我希望主体的宽度是2000px，但只允许滚动到1200px。在这种情况下，我认为你不需要给主体一个宽度。如果将其留空，则用户的窗口大小应决定主体大小。这样卷轴就不会受到影响。你能详细解释一下为什么你需要这么宽的背景吗？更多信息将有助于找出解决方案。我需要一个固定的大小，因为我不希望图片（覆盖主体）响应窗口的大小，除非它总是居中（图片不应该变小或变大）。这也是为什么我需要这么宽的身体的原因——因为照片。

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