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

1、<html>

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

<divclassName="outer-container">

<divclassname="inner-container">

<divclassName="container">

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

在需要的时候设置document.body.style="overflow:

hidden"就行了

<button id="btn">隐藏

滚动条

</button>

document.

getelementbyId

("btn").addeventlistener("click",overflow_hidden)

function overflow_hidden()

{

document.body.style="overflow: hidden"

}

</script>如上就可以在点击按钮时隐藏滚动条了

1、首先打开前端开发工具hbuilder，新建一个HTML代码页面，在html代码页面上创建一个父<div>和一个子<div>，同时给这两个div添加一个class分别为scroll-box、scroll。

2、然后给子div添加内容，为了让滚动条可以实现，尽量多添加一些内容。

3、接着设置scroll-box、scroll类样式。给scroll-box设置一个高度和内容超出后隐藏的样式，给scroll设置内容超出后显示滚动条、高度为100%、宽为100%加上滚动条的宽。

4、保存html代码，使用浏览器打开，就会发现滚动条已经不显示出来，但是页面内容依然可以滚动。

欢迎分享，转载请注明来源：内存溢出

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