【前端实例】自适应垂直滑动导航条

最新推荐文章于 2022-04-26 22:41:51 发布

LaoYe - IT

最新推荐文章于 2022-04-26 22:41:51 发布

阅读量1.6k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/Rao_Limon/article/details/87886962

版权

前端专栏收录该内容

73 篇文章 3 订阅

订阅专栏

【提出需求】

当屏幕小于内容显示的高度时，用户可以通过上下滑动导航条来浏览被隐藏的内容。

【解决问题】

1、判断内容是否被隐藏

答：解决方式分为CSS和JS，前者最简单后者相对麻烦，后者因为需要获取当前容器距离顶部的像素再加上本身的高度，再和浏览器的浏览高度进行比较，如果大于则说明多余的内容被隐藏了。

2、解决CSS样式overflow隐藏多余内容后滚动条的问题

答：在该容器外嵌一个DIV，其宽度要比内层少15~17px左右（具体看浏览）

【具体效果】

【代码展示】

【CSS代码】
.outer{
    color: white;
    background-color: #3F3F3F;
    position: fixed;
    left: 0px;
    top: 0px;
    bottom: 0px;
    /* 核心代码 */
    width: 250px;		/*相对inner小于15px是因为要将导航条隐藏掉*/
    overflow: hidden;
}.inner{
    height: 100%;    /* 注意：只有当前高度低于内容高度，才会出现滚动条 */
    width: 265px;
    overflow-y: scroll;
}

【HTML代码】
<div class="outer">
	<div class="inner">
		<div class="navList">1</div>
		<div class="navList">2</div>
		<div class="navList">3</div>
		<div class="navList">4</div>
		<div class="navList">5</div>
		<div class="navList">6</div>
		<div class="navList">7</div>
		<div class="navList">8</div>
		<div class="navList">9</div>
	</div>
</div>

【其他实例】

1、水平滑动导航条

2、jQuery超简单实现返回顶部滑动效果