隱藏滾動條會導致身體向上滾動

我注意到是否試圖掩蓋使用overflow:hidden滾動網站頂部的滾動條，如果這個CSS樣式用於html和body元素：隱藏滾動條會導致身體向上滾動

html,body { 
    height: 100%; 
}

這是使用jQuery代碼：

$('#end').click(function(){ 
     $("html, body").css("overflow", "hidden"); 
});

生活演示：http://jsfiddle.net/hYNGn/

這發生在所有主流瀏覽器：Chrome，Firefox，IE9，Opera ...

如何避免這種行爲？

謝謝。

來源

2013-10-07 Alvaro

@epascarello我說的是垂直滾動。無論內容如何，它都會滾動頁面。 – Alvaro

@epascarello其實。在手機上（至少iPhone），滾動條位於身體上方，不會「吃東西」任何空間。 – Alvaro

我在我的肖像監視器上運行它，當我運行代碼時，內容向上移動[沒有可用的滾動條]。我認爲這就是你在說的。我誤解了滾動問題。 – epascarello

身體有height: 100%但孩子節點讓他溢出。當你設置溢出到hidden結果身體回到高度：100％相對於窗口，所以它看起來像一個滾動。

你可以做到這一點，保持高度，但我沒有看到這樣的地步，這是錯誤的鍍鉻/鉻滾動

$("html, body").css({ 
    "overflow": "hidden", 
    "height": "auto" 
});

來源

2013-10-07 16:39:13

那麼你會建議什麼解決方案？隱藏滾動條是非常常見的工作與層，並更多地使用它們在觸摸設備上。 – Alvaro

也許這樣？

http://jsfiddle.net/hYNGn/2/

$('#end').click(function(){ 
    var thetop = - $(window).scrollTop(); 
    $("div.demo").css("margin-top",thetop); 
    $("html, body").css("overflow", "hidden"); 
});

來源

2013-10-07 16:24:17 user2217162

它做的工作，但...看起來更像是一個騙子，而不是一個適當的解決方案:) – Alvaro

這不是一個騙子 - 這是一個適當的解決方案。我不明白爲什麼這會是一個問題：事實上，通過刪除滾動條，您正在破壞用戶的滾動位置，因爲身高已經縮小到視口的高度。 Upvote的努力。 – Terry

@Terry它正在修改邊距。然後，如果我想恢復正常，我仍然會遇到完全相同的問題。 – Alvaro

只有定身隱藏溢出：

$('#end').click(function(){ 
    $("body").css("overflow", "hidden"); 
});

http://jsfiddle.net/jaap/hYNGn/5/

來源

2013-10-07 16:44:34 Jaap

試試這個：

$('#end').click(function(){ 
     $("html, body").css("overflow", "hidden"); 
     var bodyElement = $("body"); 
     bodyElement.scrollTop(bodyElement.height()); 
});

來源

2013-10-07 16:46:30

最佳解決方法您的問題將被移動到div的滾動部分。

廣告：溢出隱藏在身體

html,body { 
height: 100%; 
overflow: hidden; 
}

廣告這樣的：

.demo { 
width: 100%; 
height: 100%; 
overflow: auto; 
position: absolute; 
}

，並使用此單擊事件：

$('#end').click(function(){ 
$("div.demo").css("overflow", "hidden"); 
});

來源

2013-10-07 16:56:48 MarkRosenvinge

隱藏滾動條會導致身體向上滾動

回答

相關問題