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、完全隐藏
在<boby>里加入scroll="no",可隐藏滚动条;
<boby scroll="no">
2、在不需要时隐藏
指当浏览器窗口宽度或高度大于页面的宽或高时,不显示滚动条;
反之,则显示;
<boby scroll="auto">
3、另一种方法
<style type="text/css">
body {
overflow-x:hidden
overflow-y:hidden
}
</style>
<style type="text/css">
html {
overflow-x:hidden
overflow-y:hidden
}
</style>
在我们使用WINDOWS的软件的时候,跨页的时候,右侧有一个条,用于翻页。
他就是滚动条:用鼠标轮控制,用键盘控制,用鼠标拖动控制等。
滚动条由滚动滑块和滚动箭头组成
实现页与页的切换。
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>