Question

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

<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"
            });
        }
    });
});

工作正常。但是如果窗口宽度小于1200px，我还想阻止用户滚动超过1200px（这里的问题是，只要窗口宽度小于1200px，就可以滚动到全宽 - 2000px）。

那你怎么解决这个问题呢？

Answer 1

如果我理解你的问题，那么我相信可以通过在你的身体标签上添加最大宽度样式来解决这个问题。这为我消除了侧面滚动。

body {
    max-width: 2000px;  
}

Answer 2

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

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

如何设置最大滚动位置？

2 个答案: