CSS 禁止滚动条（隐藏或屏蔽IE滚动条的几种常用方法）

Posted 2023-05-05

CSS 禁止滚动条，有4种方法，具体如下：

1、完全隐藏
在<boby>里加入scroll="no"，可隐藏滚动条；
<boby scroll="no">

2、在不需要时隐藏
指当浏览器窗口宽度或高度大于页面的宽或高时，不显示滚动条；
反之，则显示；
<boby scroll="auto">

3、样式表方法
在<boby>里加入style="overflow-x:hidden"，可隐藏水平滚动条；
加入style="overflow-y:hidden"，可隐藏垂直滚动条。
被包含页面里加入
<style>
html  overflow-x:hidden; 
</style>


4、另一种方法
<style type="text/css">
body 
overflow-x:hidden;
overflow-y:hidden;

</style> 

<style type="text/css">
html 
overflow-x:hidden;
overflow-y:hidden;

</style> 参考技术A 1、完全隐藏在<boby>里加入scroll="no"，可隐藏滚动条；<boby scroll="no">2、在不需要时隐藏指当浏览器窗口宽度或高度大于页面的宽或高时，不显示滚动条；反之，则显示；<boby scroll="auto">3、样式表方法在<boby>里加入style="overflow-x:hidden"，可隐藏水平滚动条；加入style="overflow-y:hidden"，可隐藏垂直滚动条。被包含页面里加入<style>html overflow-x:hidden; </style>有一段解释是这样说的：body overflow-x:hidden; 在标准 DTD 下是不可以的4、另一种方法<style type="text/css">body overflow-x:hidden;本回答被提问者采纳

html滚动条隐藏后不能滚动,隐藏滚动条，但仍然可以滚动

更新： Firefox现在支持使用CSS隐藏滚动条，因此现在涵盖了所有主流浏览器(Chrome，Firefox，IE，Safari等)。

只需将以下CSS应用于要从中删除滚动条的元素：.container {

overflow-y: scroll;

scrollbar-width: none; /* Firefox */

-ms-overflow-style: none;  /* IE 10+ */}.container::-webkit-scrollbar { /* WebKit */

width: 0;

height: 0;}

这是我目前所知道的最少hacky跨浏览器解决方案。看看演示。

原始答案：

这是另一种尚未提及的方式。它非常简单，只涉及两个div和CSS。不需要JavaScript或专有CSS，它适用于所有浏览器。它不需要明确地设置容器的宽度，从而使其流动。

此方法使用负边距将滚动条移出父级，然后使用相同数量的填充将内容推回到其原始位置。该技术适用于垂直，水平和双向滚动。

演示：

垂直版本的示例代码：

HTML：

Your content.  

CSS：.parent{

width: 400px;

height: 200px;

border: 1px solid #aaa;

overflow: hidden;}.child{

height: 100%;

margin-right: -50px; /* maximum width of scrollbar */

padding-right: 50px; /* maximum width of scrollbar */

overflow-y: scroll;}