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

html-css014

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 内部内容再限制尺寸和外部嵌套层一样,就变相隐藏了。

记录一下日常开发...

之前开发隐藏 div 滚动条,都是通过设置外出 div 为 overflow: hidden , 然后设置内层 div 的宽度略大于外层 div ,这种做法限制很多,需要确定内外层 div 的宽度,没办法自适应多种分辨率的屏幕,而且开发调试起来很麻烦。

总结一下,隐藏 div 滚动条的几种方式