如何啓用特定div的滾動並禁用頁面的滾動

是否可以禁用頁面的滾動，並且僅對頁面內的特定div啓用？如何啓用特定div的滾動並禁用頁面的滾動

2013-08-23 Caspert

這沒關係css唯一的解決方案？

如果是這樣，只需添加overflow：隱藏到body和overflow：auto到可滾動的div。

body { 
    overflow: hidden; 
} 

#scroller { 
    overflow: auto; 
    height: 100px; 
}

2013-08-23 20:24:25 patrick

絕對，CSS會很棒。我試過你的代碼，它正在工作，但滾動條隱藏在內容之後。還有一些項目在div #scroller中不完全可見。 – Caspert

你是什麼意思與滾動條隱藏後的內容？ – patrick

瀏覽器滾動條是在內容後面，所以我不能再使用它了。@patrick – Caspert

禁用它使用方法：

CSS

.disableScroll{ 
     overflow-y:hidden; 
     overflow-x:hidden; 
}

只需添加<body class="disableScroll">到禁用

內嵌樣式<body style="overflow:hidden">

的DIV使用，請滾動啓用<div style="overflow:auto;">

請記住，你可以使用溢出-Y用於垂直滾動和溢出-X的水平滾動性質

2013-08-23 20:27:09 Tatarin

爲什麼不只是'overflow：hidden'而不是overflow-x和y？ –

@Harsh給予更多的靈活性，以防他想禁用垂直與水平 – Tatarin

爲整個頁面：

body { 
    height: 100%; 
    width: 100%; 
}

的DIV例如：

div.scroll { 
    width:180px; 
    height:170px; 
    overflow:auto; 

}

在HTML：

<div class='scroll'></div>

2013-08-23 20:27:55

確保BODY和HTML標籤沒有填充和邊距，否則'寬度：100％;'和'高度：100％'會推動邊緣超出界限並創建滾動條。 – Broxzier

嗨@ArtsiomMitrokhin我試過你的代碼。它正在工作，但是當我到達頂部或底部時，您會看到您可以滾動。當滾動到達內容區域的底部時，僅在底部和頂部。 – Caspert

HTML：

<div class="scrollDisable"></div>

CSS：

.scrollDisable{ 
    overflow-y:hidden; 
    overflow-x:hidden;

}

對於整個頁面：

body { 
    height: 100%; 
    width: 100%; 
}

希望這會有所幫助。

2014-08-13 11:12:56

回答