假設頁面的正文寬度設置為2000像素,內容在正文內部水平居中,寬度設置為1200像素。
<body>
<div class="content"></div>
</body>
CSS:
body {
width: 2000px;
}
.content {
position: relative;
width: 1200px;
margin-left: auto;
margin-right: auto;
}
我想實現的是,我不允許水平滾動,直到你的 將overflow-x設置為hidden時,窗口大小為1200px或更小(調整大小時)。
$(function() {
$(window).resize(function() {
if(window.innerWidth > 1200) {
$("body").css({
"overflow-x": "hidden"
});
} else {
$("body").css({
"overflow-x": "visible"
});
}
});
});
這很好。但是如果用戶的窗口寬度小于1200像素,我還想防止用戶滾動超過1200像素(這里的問題是,只要窗口寬度小于1200像素,就有可能滾動到全寬-2000像素)。
那么你會如何解決這個問題呢?
# # #如果我正確理解了你的問題,那么我相信這個問題可以通過在你的body標簽中添加一個最大寬度樣式來解決。這消除了我的側滾動。
body {
max-width: 2000px;
}
# # #在這種情況下,您可以使用scrollLeft屬性:
onScroll = function (e){
var maxScroll=1200
if(e.target.scrollLeft>maxScrollLeft){
e.target.scrollLeft=maxScrollLeft
}
}