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

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

纯DIV+CSS方法

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

<div class="outer-container"><div class="container"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li></ul></div>
</div>.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;
}<div id="asider" onmouseover="toggle1()" onmouseout="toggle2()"><ul><li>菜单1</li><li>菜单2</li><li>菜单3</li><li>菜单4</li><li>菜单5</li><li>菜单6</li><li>菜单7</li></ul>
</div><script type="text/javascript">function toggle1() {document.getElementById('asider').style.overflowY='scroll';}function toggle2() {document.getElementById('asider').style.overflowY='hidden';}
</script>

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

html怎么隐藏y方向内容,如何隐藏scroll-Y纵向滚动条，并不影响内容滚动的方法...
网上搜了需的请本现等现近求项求人这行的近求项求人很多关于隐藏滚动条的文章,发现很多都是只说了如何隐藏scroll-X横向滚动条,对scroll-Y纵向滚动条并没有明确的述说.本文章将介绍3种隐藏滚动条 ...
控制DIV内容滚动的方法，实现不用拖滚动条就可以看到最新消息
三种控制DIV内容滚动的方法: 本人qq群也有许多的技术文档,希望可以为你提供一些帮助(非技术的勿加). QQ群: 281442983 (点击链接加入群:http://jq.qq.com/?_wv ...
浏览器隐藏滚动条（不影响内容滚动）
系列文章目录文章目录系列文章目录一.背景和效果图如下: 1.背景 2.设置属性前效果图: 2.设置后效果图: 二.直接通过CSS修改样式,保存滑动功能 1.全局设置滚动条如下(所有的都被隐藏) ...
vsto 隐藏前面的列滚动条在后面需要滚动到最前面
Excel.Window activeWindow = Globals.ThisAddIn.Application.ActiveWindow; activeWindow.ScrollColumn = ...
Css实现自动隐藏scroll滚动条但不影响滚动功能
Css实现自动隐藏scroll滚动条但不影响滚动功能谷歌内核webkit .container::-webkit-scrollbar {display: none; //Safari and Chr ...
html纵向滚动条隐藏,隐藏横向滚动条或纵向滚动条的解决方案
在WEB实际开发过程中,特别是在iframe引用其它网页时,可能大家遇到过这样的问题,当您的页面在框架中的时候,即使您的所有的控件的宽度都没有超过屏幕宽度(一般设置为100%),但横向滚动条依然出现. ...
html5纵向滚动条隐藏,css怎么让滚动条隐藏？
在CSS中,隐藏滚动条的同时还支持滚动是可以实现的,而且方法也有不少.下面分享三种CSS滚动条隐藏并可以滚动的方法. 方法1:计算滚动条宽度并隐藏起来实例下面给一个简化版的代码 ...... .o ...
html纵向滚动条隐藏,css隐藏滚动条(横向,坚向)
网上都说使用overflow-y:hiddencss可以隐藏滚动条,但是只能针对div元素,并不能隐藏浏览器,而一些资料说里加入scroll="no",可隐藏滚动条:在里加入st ...
十分有用的CSS样式解决y轴滚动条隐藏功能
十分有用的CSS样式解决y轴滚动条功能一条代码搞定哦 -webkit-scrollbar{ display:none } 虽然这条代码还未正式上线但是可以先使用

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

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

最新文章

热门文章