多语言展示
当前在线:409今日阅读:82今日分享:48

隐藏页面内的滚动条内容可以滚动兼容所有浏览器

隐藏页面内由 overflow-x 或者 overflow-y 产生的滚动条,内容仍可以滚动,CSS就能解决(其实非常简单,用padding就可以解决,如果着急,这里的可以忽略不看,直接看下面的方法——由于需要隐藏滚动条,在网上【墙内/墙外】翻了个遍,没有查到有效的隐藏方法,过程中看到一个,因为实在太难找,所以在这里分享,避免大家走弯路,找了其他的方法隐藏滚动条之后,内容不能滚动了,还不知道能不能兼容IE大哥,还有别的不起作用的方法就不一一说了,感谢那位前辈的经验,^_^)
工具/原料
1

一台电脑

2

一款网页编辑器 记事本也行

3

一个浏览器

方法/步骤
1

这里以垂直滚动条为例,水平滚动条同理;举例说明:

文本 文本 文本 文本 文本 文本
 假设有很多文本 ,但这个div高度固定,设置overflow-y:auto;产生垂直滚动条;(这里设成overflow:auto;因为产品需要,可能里面的文本多或者少;少的话,就不产生滚动条;如果直接设置 overflow-y:scroll;即使没有那么多内容也会有滚动条;)

2

这时给这个 child 加一个父级  parent

     
文本 文本 文本 文本 文本
parent 的宽高和 child 一样,parent设置 overflow:hidden;设置border;child 不要 border 避免border 重复;最后一步很重要!很重要!给child设置 padding:  0  20px;大功告成!!!如下图:

3

The text is out of the scroll bar. The text is out of the scroll bar. The text is out of the scroll bar. The text is out of the scroll bar. The text is out of the scroll bar. The text is out of the scroll bar. The text is out of the scroll bar. The text is out of the scroll bar. The text is out of the scroll bar. The text is out of the scroll bar. The text is out of the scroll bar. The text is out of the scroll bar. The text is out of the scroll bar. The text is out of the scroll bar. The text is out of the scroll bar. The text is out of the scroll bar. The text is out of the scroll bar. The text is out of the scroll bar. 

注意事项

不要忘了最基础的东西

推荐信息