关键词:
代码如下:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
ul,li,ol{padding:0;margin:0;}
.nav_wrap{height:300px;width:200px;overflow:hidden;border:1px solid #ccc;margin:20px auto;float:left;}
.nav_ul{height:100%;width:220px;overflow-y:scroll;overflow-x:hidden}
.nav_li{border:1px solid #ccc;margin:-1px;height:40px;line-height:40px;text-align:center;font-size:12px;width:200px}
.btn_wrap{text-align:center}
</style>
</head>
<body>
<div class="nav_wrap">
<ul class="nav_ul">
<li class="nav_li">我是菜单1</li>
<li class="nav_li">我是菜单2</li>
<li class="nav_li">我是菜单1</li>
<li class="nav_li">我是菜单2</li>
<li class="nav_li">我是菜单1</li>
<li class="nav_li">我是菜单2</li>
<li class="nav_li">我是菜单1</li>
<li class="nav_li">我是菜单2</li>
<li class="nav_li">我是菜单1</li>
<li class="nav_li">我是菜单2</li>
<li class="nav_li">我是菜单1</li>
</ul>
</div>
</body>
</html>
原创:http://blog.csdn.net/liusaint1992/article/details/51277751
纯css隐藏滚动条
::-webkit-scrollbar{width:0px;height:1px;}::-webkit-scrollbar-thumb{border-radius:5px;-webkit-box-shadow:inset005pxrgba(0,0,0,0.2);background:rgba(0,0,0,0.2);}直接复制即可 查看详情
overflow-y:hidden隐藏了上下滚动条以后鼠标滚球无法滚动?
overflow-y:hidden隐藏了上下滚动条以后鼠标滚球无法滚动。我隐藏上下的滚动条,但是放了这个代码却无法鼠标上的滚珠上下滚动了。怎么处理* overflow-y:hidden;是的,当使用CSS属性overflow-y:hidden;来隐藏元素的上下滚动条时,将会禁... 查看详情
css如何实现滚动条隐藏但鼠标仍然可以滚动
...候,有些时候需要元素超出屏幕可以滚动,为了美观需要隐藏滚动条。如果只需兼容chrome和safari,可以使用自定义滚动条的伪对象选择器——::webkit-scrollbar。 具体使用即:element::webkit-scrollbar{display:none}或者element::webkit-scro... 查看详情
css隐藏div滚动条
参考技术A记录一下日常开发...之前开发隐藏div滚动条,都是通过设置外出div为overflow:hidden,然后设置内层div的宽度略大于外层div,这种做法限制很多,需要确定内外层div的宽度,没办法自适应多种分辨率的屏幕,而且开发调试起... 查看详情
html的一个div样式,如何使内容滚动条隐藏,但依旧可以滚动?
需要准备的材料分别有:电脑、浏览器、html编辑器。1、首先,打开html编辑器,新建html文件,例如:index.html,编写问题基础代码。2、在index.html中的<head>标签中,加入css代码:<style>::-webkit-scrollbardisplay:none;</style>。... 查看详情
css—溢出隐藏(隐藏滚动条,依旧可以滚动)
公司的系统,在PC端可以管理我们的公众号,在发布模块页面时有一个预览功能,呈现页面在手机端的样式。做法很简单,一会就完成了,但是在预览内容过长时手机外框会有一个滚动条,影响美观,于是就想把它去掉,有一个... 查看详情
Chrome 为滚动条保留空间,即使它是隐藏的
】Chrome为滚动条保留空间,即使它是隐藏的【英文标题】:Chromereservesspaceforscrollbarevenifitishidden【发布时间】:2014-11-1413:47:46【问题描述】:我在webkit浏览器(IE和FF都可以)上遇到了一个问题,其中滚动条空间是为元素保留的,... 查看详情
css设置滚动条并显示或隐藏(代码片段)
看效果,没有滚动条,超出div,开发中肯定不行。 有滚动条 最后就是想隐藏滚动条 代码有滚动条并显示 1<!DOCTYPEhtml>2<htmllang="en">3<head>4<metacharset="UTF-8">5<title>Title</tit 查看详情
css3隐藏滚动条样式效果
chrome和Safari.element::-webkit-scrollbarwidth:0IE10+.element-ms-overflow-style:none;Firefox.elementoverflow:-moz-scrollbars-non 查看详情
纯css实现顶部进度条随滚动条滚动
一、效果图二、直接复制粘贴<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatibl 查看详情
css隐藏滚动条并且可以滑动
比如有一个div css代码: div{scrollbar-face-color:transparent;scrollbar-arrow-color:transparent;scrollbar-track-color:transparent;scrollbar-3dlight-color:transparent;}div::-webkit-scrollbar{dis 查看详情
纯css3实现文字间歇滚动效果
...有4条数据或者标题,视口中只显示两条,采用每次向上滚动一条数据来展示所有的数据。效果如图:用JavaScript也很容易实现,但是需要操作DOM,可以参考这篇博客。考虑到项目中经常使用Vue,已经很少操作DOM了,所以考虑最好... 查看详情
css移动端隐藏滚动条
去除移动端浏览器滚动条:element::-webkit-scrollbar{display:none}IOS滚动条流畅:div{-webkit-overflow-scrolling:touch} 查看详情
纯css写的步骤条
...其中横向滑动可以参加另外一篇文章:css如何实现滚动条隐藏但鼠标仍然可以滚动 查看详情
div如何加滚动条
...效果。同时也可以使用CSS样式设置html框架iframe的滚动条隐藏。DIVCSS5通过对第一个DIV对象设置div宽度、div高度、div边框样式,并在DIV盒子里添加演示文字内容,第二个盒子设置相同的CSS样式,盒子文字内容相同,并设置横向和纵... 查看详情
如何在 Firefox 中隐藏滚动条而不停止在 div 中滚动
】如何在Firefox中隐藏滚动条而不停止在div中滚动【英文标题】:HowtohidescrollbarinFirefoxwithoutstopscrollingindiv【发布时间】:2019-01-2808:34:53【问题描述】:如何在mozilafirefox中隐藏滚动条而不停止在div中滚动。我在css下面使用过,但我... 查看详情
用css实现自定义带有过渡和隐藏效果的滚动条
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie 查看详情
css-(左右滑动时,隐藏底部滚动条)
先上效果图,如下:是不是经常看到此类效果?这里如果不借用其它框架,单纯的利用css来实现怎么做呢?1.这一看就要用到overflow,但是用它会有一个默认的滚动条;2.那么重点来了,怎么解决这个问题呢?3.用 ::-webkit-scroll... 查看详情