可以水平滚动的导航栏

最新推荐文章于 2022-10-12 18:21:38 发布

最新推荐文章于 2022-10-12 18:21:38 发布 · 470 阅读

文章标签：

#水平滚动 #水平滑动 #scroll #horizon scroll #水平导航

javascript 同时被 2 个专栏收录

140 篇文章

订阅专栏

css

23 篇文章

订阅专栏

有时候我们的水平导航栏的长度会超过屏幕宽度,那么如何增加水平滚动条呢?

使用场景:新闻页面的导航栏.

实现的效果如下:

火狐中:

chrome中:

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0 ,user-scalable=no">
<script src="http://www.ycf518518.com/static/js/jquery-1.11.1.js" type="text/javascript"></script>
<script >
window.onload=function()
{
var width = 0;
	$('nav div.container a').each(function () {
    width += (this.offsetWidth+10);//不包括超链接的margin
	
  });
  //alert(width);
  $('#overflow div.container').css('width', width + "px");
}
</script>
<style>
#overflow {
        border: 1px solid #f00;
        overflow-x: scroll;
        overflow-y: hidden;
		width: 100%; 
    }
	nav div a{
		margin-right: 10px;
		display:inline-block;
		float:left;
	}
</style>
</head>    
<body>
<header>
<h1>新闻</h1>
</header>
<nav>
<div id="overflow" >
<div class="container">
<a href="index.asp">Home1</a>
<a href="html5_meter.asp">Previous2</a>
<a href="html5_noscript.asp">栏目3</a>
<a href="html5_noscript.asp">栏目4</a>
<a href="html5_noscript.asp">栏目5</a>
<a href="html5_noscript.asp">栏目6</a>
<a href="html5_noscript.asp">栏目7</a>
<a href="html5_noscript.asp">栏目8</a>
<a href="html5_noscript.asp">栏目9</a>
<a href="html5_noscript.asp">栏目10</a>
<a href="html5_noscript.asp">栏目11</a>
<a href="html5_noscript.asp">栏目12</a>
<a href="html5_noscript.asp">栏目13</a>
<a href="html5_noscript.asp">栏目14</a>
<a href="html5_noscript.asp">栏目15</a>

</div>
</div>
</nav>
</body>
</html>

注意:

(1)超链接的样式一定要添加float:left

(2)overflow的宽度一定不能超过屏幕宽度,否则网页就会出现水平滚动条

这不是我们期望的效果: