gpt4 book ai didi

javascript - 如何设置最大滚动位置?

转载 作者:太空宇宙 更新时间:2023-11-04 13:17:51 27 4
gpt4 key购买 nike

假设我们将页面的 body 宽度设置为 2000px,内容在 body 内部水平居中,宽度设置为 1200px。

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

CSS:

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

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

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

效果很好。但我也想防止用户在窗口宽度小于 1200px 时滚动超过 1200px(这里的问题是,一旦窗口宽度小于 1200px,就可以滚动到全宽 - 2000px)。

那么你会如何解决这个问题?

最佳答案

如果我正确理解您的问题,那么我相信可以通过向您的 body 标记添加最大宽度样式来解决此问题。这为我消除了侧滚动。

body {
max-width: 2000px;
}

关于javascript - 如何设置最大滚动位置?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22774763/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com