如何隐藏scroll-Y纵向滚动条，并不影响内容滚动的方法

chanthuang 发布于2019-08-30 14:03 / 2728人阅读

摘要：网上搜了很多关于隐藏滚动条的文章，发现很多都是只说了如何隐藏横向滚动条对纵向滚动条并没有明确的述说。本文章将介绍种隐藏滚动条的方法，大家可以结合实际情况，参考文章内容。

网上搜了很多关于隐藏滚动条的文章，发现很多都是只说了如何隐藏scroll-X横向滚动条,对scroll-Y纵向滚动条并没有明确的述说。本文章将介绍3种隐藏滚动条的方法，大家可以结合实际情况，参考文章内容。

纯DIV+CSS方法

在容器外面再嵌套一层 overflow:hidden 内部内容再限制尺寸和外部嵌套层一样，就变相隐藏了。该方法兼容所有浏览器。


        
            
                1
                2
                3
                4
                5
                6
                7
                8
                9
                10
            
        


.outer-container{
            overflow: hidden;
            width: 200px;    
        }
        .container{
            overflow-x: hidden;
            overflow-y: scroll;
            width: 220px;
            height: 100px;
            background-color: yellow;
        }

CSS3 自定义滚动条的伪对象选择器

css3有一个直接调用的css，保证隐藏滚动条的同时还可以继续通过滚轮向下翻。

::-webkit-scrollbar {
/*隐藏滚轮*/
display: none;
}

但是仅限于支持css3的浏览器。如要兼容PC 其他浏览器（IE、Firefox 等），请选择第一种方法。

原生js操作DOM

用鼠标事件调用document.getElementById("xxx").style.overflowY = "scorll",直接用overflow-y = "scorll"会报错，因为javascript把overflow和y之间的- 当作了减运算符，overflow解释成style的属性，y成了一个变量；那怎样解决这个问题呢？DOM里采用了Camel记号来解决这个问题，把overflow-y改写成overflowY即可。

#asider{
            overflow: hidden;
            width: 200px;
            height: 100px;
}


        
            菜单1
            菜单2
            菜单3
            菜单4
            菜单5
            菜单6
            菜单7

GPU云服务器云服务器 html的滚动条 java滚动条的事件 js判断滚动条的高度 js滚动条滚动动画

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115736.html

如何隐藏scroll-Y纵向滚动条，并不影响内容滚动的方法

摘要：网上搜了很多关于隐藏滚动条的文章，发现很多都是只说了如何隐藏横向滚动条对纵向滚动条并没有明确的述说。本文章将介绍种隐藏滚动条的方法，大家可以结合实际情况，参考文章内容。网上搜了很多关于隐藏滚动条的文章，发现很多都是只说了如何隐藏scroll-X横向滚动条,对scroll-Y纵向滚动条并没有明确的述说。本文章将介绍3种隐藏滚动条的方法，大家可以结合实际情况，参考文章内容。纯DIV+...

qpwoeiru96 2019-08-01 18:38 评论0 收藏0
如何隐藏scroll-Y纵向滚动条，并不影响内容滚动的方法

摘要：网上搜了很多关于隐藏滚动条的文章，发现很多都是只说了如何隐藏横向滚动条对纵向滚动条并没有明确的述说。本文章将介绍种隐藏滚动条的方法，大家可以结合实际情况，参考文章内容。网上搜了很多关于隐藏滚动条的文章，发现很多都是只说了如何隐藏scroll-X横向滚动条,对scroll-Y纵向滚动条并没有明确的述说。本文章将介绍3种隐藏滚动条的方法，大家可以结合实际情况，参考文章内容。纯DIV+...

JerryWangSAP 2019-08-22 14:55 评论0 收藏0
今天，你的浏览器 “滚动” 了吗？

摘要：今天，你的浏览器滚动了吗序在页面中，一个有高度或者宽度的容器是最常见的构成元素，而在其中的子元素有很大的概率超过父容器的尺寸限制，我们称之为溢出。今天，你的浏览器滚动了吗？序在 Web 页面中，一个有高度或者宽度的容器是最常见的构成元素，而在其中的子元素有很大的概率超过父容器的尺寸限制，我们称之为溢出。而应对溢出，隐藏或者滚动是最常见的处理方式。滚动，作为 FEers 最经常...

leo108 2019-08-21 11:51 评论0 收藏0
今天，你的浏览器 “滚动” 了吗？

摘要：今天，你的浏览器滚动了吗序在页面中，一个有高度或者宽度的容器是最常见的构成元素，而在其中的子元素有很大的概率超过父容器的尺寸限制，我们称之为溢出。今天，你的浏览器滚动了吗？序在 Web 页面中，一个有高度或者宽度的容器是最常见的构成元素，而在其中的子元素有很大的概率超过父容器的尺寸限制，我们称之为溢出。而应对溢出，隐藏或者滚动是最常见的处理方式。滚动，作为 FEers 最经常...

ad6623 2019-08-29 13:09 评论0 收藏0
css隐藏移动端滚动条并且ios上平滑滚动

摘要：完整代码如下移动端隐藏滚动条解决方案解决上滑动不流畅推荐娃娃日用品美妆护肤娃娃日用品美妆护肤娃娃 HTML代码如下移动端隐藏滚动条解决方案 * { padding: 0; margin: 0; } .par-type { height: 50px; ...

wangzy2019 2019-08-30 15:55 评论0 收藏0