html js 或者css怎么做到隐藏滚动条，但是依旧可以滚动？

html-css08

html js 或者css怎么做到隐藏滚动条，但是依旧可以滚动？,第1张

1、<html>

<divid="root"style="width:100%height:100%">

<divclassName="outer-container">

<divclassname="inner-container">

<divclassName="container">

</div>

</div>

</div>

</div>

2、CSS：

.outer-container{

width:100%

height:100%

overflow:hidden

}

.inner-container{

width:100%

height:100%

overflow:auto

box-sizing:content-box

padding-right:17px

}

扩展资料：

使用 overflow:hidden 隐藏滚动条，但存在的问题是页面或元素失去了滚动的特性，由于只需要兼容移动浏览器（Chrome和Safari）

应用如下CSS可以隐藏滚动条：

.element::-webkit-scrollbar{display:none}

如果要兼容PC其他浏览器（IE、Firefox等），在容器外面再嵌套一层 overflow:hidden 内部内容再限制尺寸和外部嵌套层一样，就变相隐藏了。

1、取消竖直滚动条：

<body style=`overflow:-Scrolloverflow-y:hidden` >

</body>

2、取消横向滚动条：

<body style=`overflow:-Scrolloverflow-x:hidden` >

</body>

3、两个滚动条都取消

<body scroll="no">

</body>

用CSS可以实现效果。代码如下： html{height:100%}body{height:100%overflow:hidden}//overflow:hidden为隐藏滚动条 body{overflow:scroll}//如果内容高度大于屏幕就会显示滚动条