用CSS隐藏或自定义侧向导航栏的滚动条

问题：

自己在做界面的时候做到导航栏那一块，发现导航栏内容过多时会出现一个浏览器自带的滚动条，这对于二分布局中左侧的导航栏来说是极其不友好的，因为浏览者可能会因为滚动条的突然出现而视觉干扰从而影响浏览体验，所以现在的任务就是隐藏这个自带的滚动条，或者对于一些有需要的朋友们也可以自己设计滚动条的样式。

解决方案：

首先我们得先制作出一个侧向导航栏：导航栏是在左侧，效果是固定在界面上并且有滚动需要的话可以滚动：

如何制作一个导航栏就不说了，有很多现成的ui类库可供使用，对css了解得比较深入的话自己写一个也不是很费事，我这里就直接上图了。

想要实现让其固定且滚动的话记得给列表元素加上这些样式：

ul.left-nav {position: fixed;left: 0;top: 0;bottom: 0;overflow-x: hidden;
}

解决方法一

好的我们先来看下这个更简单但是局限性更大的方法，那就是直接利用伪元素系列-webkit-scrollbar，直接给你的列表元素加上这个伪元素然后设置一个属性就完美解决：

ul::-webkit-scrollbar {display: none;
}

话说这个好像是适用于手机端的伪元素但是经过测试发现pc端也是有效果的，但是大家肯定都看出来了，这个-webkit前缀就说明它只适用于基于webkit内核的浏览器比如谷歌，对于其他浏览器滚动条该出现还是会出现的。

此外有很多与之类似的伪元素是用来自定义滚动条的，比如-webkit-scrollbar-track用于设置滚动槽样式，-webkit-scrollbar-thumb:hover用于设置悬浮在滚动条上触发的样式，此类伪元素还有很多，足够你设置出一个炫酷的条条，这方面就不详细展开叙述了，因为其他的博客和文章已经说得比较详细了，比如这个转载的博客CSS3自定义滚动条样式 -webkit-scrollbar。

解决方法二

下面这个方案才是我们今天的重点，上面那个方案是直接对列表进行伪元素操纵达到效果，而这个方案是通过在列表外面包裹两个div元素来实现的：

<div class="nav-outter"><div class="nav-inner"><ul class="...">......</ul></div>
</div>

然后我们就可以把先前对ul列表元素的设置都放到这个外面的div元素里来了，注意这里的宽度需要和你写列表项的宽度一致，我这里是200px:

.nav-outter {position: fixed;top: 0;bottom: 0;width: 200px;overflow-x: hidden;
}

接着设置里面div元素的属性，这里的宽度需要比外块的宽度更大，多出的范围刚好就是滚动条的宽度，我这里就增加了20px这样足以覆盖滚动条，这样的话父元素就可以用overflow-x: hidden将这部分给屏蔽，另外这里一定要给height属性设置100%，少了的话不美观，多了的话那这个div又会出现自带滚动条，不设置的话就会默认为这整个元素的高度，那同样和前一种情况一样，即会出现div自带的滚动条。（这里的overflow-x: hidden是我试出来的，但是我其实没想明白它在这里的作用，知道的朋友还请不吝赐教）

.nav-inner {            width: 220px;height: 100%;overflow-x: hidden;
}

做到这里就已经大功告成了，这个时候打开浏览器查看你的效果你会发现滚动条没有了而自己还能随心所欲地上下滑动。当然更为关键的是它是兼容大多数浏览器的（目前只测试过谷歌，火狐，IE11，edge，这些都可行，有些老版的IE好像需要加*zoom属性）。

所以噫吁嚱长叹一声终于可以做右边的界面了。

其实要隐藏滚动条肯定还有其他方法，只是我功力浅薄还不太懂。当然还有一些好玩的偏方法，比如就在外面仅套一个div元素，然后设置一下它的样式：

.nav-wrap {width: 1500px;height: 100%;overflow-x: hidden;position: fixed;top: 0;bottom: 0;
}

哈哈哈哈哈通过设置宽度让滑动条隐藏到看不见的右边，也可以实现隐藏滑动条的“视觉效果”，当然这样做是有问题的，比如鼠标放在右边的区域滑动的也是导航条，所以也就是个玩笑方法啦。

第一次写博客，也完全是当做自己记录一些东西方便日后查看，如果有写得不好或不对的地方还请指出。

用CSS隐藏或自定义侧向导航栏的滚动条相关推荐

使用 CSS 构建自定义粘性导航栏
导航栏可能是让用户轻松浏览您的网站而不会迷路的最佳方式. 人们通常将导航栏放在页面的最顶部,但如果它与您的设计相得益彰,您也可以在网页的任一侧放置导航栏.导航栏可以是导航项目的水平列表,也可以是小屏幕 ...
react native 之自定义顶部导航栏，实现标题居中可控
本来一直用的都是RN自带的组件react-navigation,但是后面需求有变,需要顶部导航栏目的标题可以自己控制,同一页面的标题根据数据库查出来的内容变化.因此自定义了一个导航栏目,实现需求. 关 ...
微信小程序自定义navigation-bar导航栏(自适应安卓苹果)
最近在写商城,中途遇到了需要自定义修改导航栏的操作,大概是如下图接过样子的,于是想手写一份,但我发现右上角的分享按钮在不同设备离顶部的距离是不一样的,于是找了下官方划水员写的文档(点这里查看),(⊙o ...
小程序自定义顶部导航栏
上篇博客自定义了一个底部导航栏,效果还可以,但是我在开发过程中又遇到了一个棘手的问题.就是在底部导航栏的第一个页面需要将页面沉浸到状态栏去,这就麻烦了,因为中间的容器页面无论第几个都是在外面的主界面里 ...
微信小程序实现自定义顶部导航栏（选项卡），固定导航栏和可滑动导航栏
微信小程序实现自定义顶部导航栏(选项卡),固定导航栏和可滑动导航栏固定导航栏可滑动导航栏顶部导航栏的需求实现: 顶部导航栏由列表渲染,通过tabclick点击事件改变activeIndex变量的 ...
微信小程序自定义顶部导航栏标题 navigationStyle
微信小程序自定义顶部导航栏标题单页面自定义导航栏修改需要自定义的页面,的页面配置.json文件全部页面自定义导航修改公共页面配置app.json 单页面自定义导航栏修改需要自定义的页面,的 ...
css+js实现自动伸缩导航栏
用css+js实现自动伸缩导航栏需要达到的效果: 默认首页选中样式设置鼠标滑过效果:颜色变化(#f60),宽度变化,字体变化所涉及的知识点: 布局:float css: 元素状态切换(displ ...
uniapp开发微信小程序自定义顶部导航栏
自定义导航栏渐变色,先上效果使用uniapp开发小程序,在不同界面,要去对页面进行修改顶部导航栏. 比如说要去定义导航栏的背景颜色,常规的去定义导航栏背景颜色全局定义导航栏 "windo ...
小程序自定义头部导航栏(“navigationStyle“: “custom“)，自定义tabBar
一.自定义顶部导航 1.在某些时候,不想要自带的顶部导航栏,需要自己定义,这时可以将自定义的导航栏做成一个组件,然后做一下初始配置,在每个页面引用,初始化,即可得到一个自定义的顶部导航栏: 2.代码部 ...

用CSS隐藏或自定义侧向导航栏的滚动条

问题：

解决方案：

解决方法一

解决方法二

用CSS隐藏或自定义侧向导航栏的滚动条相关推荐

最新文章

热门文章