如何設置最大滾動位置？

假設我們將頁面的主體寬度設置爲2000px，而內容水平居中放置，寬度設置爲1200px。如何設置最大滾動位置？

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

CSS：

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

我想實現的是，我不容許水平滾動所有，直到你的窗口大小爲1200像素或更低（在調整大小）與設定溢出-X隱藏。

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

它工作正常。但是，如果窗口寬度小於1200像素，我還想防止用戶滾動超過1200像素（這裏的問題是，只要窗口寬度小於1200像素，可以滾動到全寬 - 2000像素）。

那麼你會如何解決這個問題？

來源

2014-04-01 Matúš Dúbrava

所以基本上你想要的內容被固定在'1200px'，與400px'的''一個保證金left'，直到一個下降到1200像素的屏幕大小？ –

不，我不想將margin-left設置爲400px，將它設置爲auto，以便內容總是居中。 –

如果我正確理解您的問題，那麼我相信這可以通過爲您的身體標記添加最大寬度樣式來解決。這消除了我的側滾動。

body { 
    max-width: 2000px; 
}

來源

2014-04-01 21:55:44 ericlucas23

如果您將max-width設置爲2000px，那麼您將可以滾動到2000px。我想要的身體是2000px寬度，但只允許滾動到1200px。 –

在這種情況下，我不認爲你需要給身體一個寬度。如果您將其留空，則用戶的窗口大小應決定主體大小。那麼滾動不會受到影響。你能詳細說說爲什麼你需要廣泛的背景嗎？更多信息將有助於找出解決方法。 – ericlucas23

我需要一個固定的大小，因爲我不想讓圖片（它覆蓋了主體）響應窗口的大小，而不是始終居中（圖片不應該變小或變大）。這也是我爲什麼需要那麼寬的身體的原因 - 因爲這張照片。 –

在這種情況下，你可以使用scrollLeft proprerty：

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

來源

2014-10-13 20:47:00 user2648503

如何設置最大滾動位置？

回答

相關問題