如何启用特定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

回答