大家好，欢迎来到IT知识分享网。
最近做一个小需求，就是类似vue文档这样的布局
上面是固定的header，左边是导航，右边是内容，并且点击左边的导航项，跳转到对应的内容区域
布局上可以用传统的position就可以实现，当然也可以使用flex布局，（项目中使用了flex，还是要尽量使用新技术的嘛，毕竟兼容性也很良好了）
跳转定位一开始想用a标签的锚点定位，后来无意中发现了scrollIntoView这个东东，在网上百度，发现w3c并没有相关介绍，但是有很多技术博客讲到了，兼容性也还好，并且可以实现动画效果，这个还是比较赞的，因为一开始考虑到想做的体验好一些，想要加动画，但是锚点本身并没有动画，还是需要用js来实现，就麻烦了。
下面展示布局和跳转的demo代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding:0;
margin:0;
}
html,body{
width:100%;
height:100%;
}
.box{
height:100%;
}
.header{
position: fixed;
top:0;
left:0;
height:60px;
line-height:60px;
width:100%;
background:pink;
text-align: center;
}
.content{
box-sizing: border-box;
height:100%;
width:100%;
padding-top:60px;
position:relative;
}
.left{
position:absolute;
top:60px;
left:0;
bottom:0;
width:300px;
border-right:1px solid green;
overflow: auto;
}
.right{
position:absolute;
top:60px;
left:300px;
bottom:0;
right:0;
overflow:auto;
}
.right div{
box-sizing: border-box;
height:100px;
}
</style>
</head>
<body>
<div class="box">
<div class="header">header</div>
<div class="content">
<div class="left">
<ul>
<li id="one">一</li>
<li id="two">二</li>
<li id="three">三</li>
<li id="four">四</li>
<li id="five">五</li>
<li id="six">六</li>
<li id="seven">七</li>
<li id="eight">八</li>
<li id="nine">九</li>
<li id="ten">十</li>
</ul>
</div>
<div class="right">
<div id="one-content" style="height:100px;">
内容一
</div>
<div id="two-content" style="height:100px">
内容二
</div>
<div id="three-content" style="height:100px">
内容三
</div>
<div id="four-content" style="height:100px">
内容四
</div>
<div id="five-content" style="height:100px">
内容五
</div>
<div id="six-content" style="height:100px">
内容六
</div>
<div id="seven-content" style="height:100px">
内容七
</div>
<div id="eight-content" style="height:100px">
内容八
</div>
<div id="nine-content" style="height:100px">
内容九
</div>
<div id="ten-content" style="height:100px">
内容十
</div>
</div>
</div>
</div>
</body>
</html><script>
var oLis = document.querySelectorAll('.left li');
Array.prototype.forEach.call(oLis,function (item) {
item.addEventListener('click',function () {
document.querySelector('#'+item.id+'-content').scrollIntoView();
})
})
</script>
scrollIntoView可接受参数ture/false ，object
true滚动到窗口的顶部，false滚动到窗口的底部
object有两个属性，block是start表示滚动到窗口的顶部，end表示滚动到窗口的底部，behavior表示动画的效果
不支持object参数的浏览器，默认是没有动画的跳转。
这里值得注意的是上面demo中，因为.content定位了，所以每一个元素都跳转到了.content的顶部的位置，如果.content不定位，
每一个元素会跳转到body也就是整个窗口的顶部，此时要是想要显示在正确的位置
可以增加每一个元素的高度，来实现，vue的官方文档就是用这个方法来实现的，
不过他用的是锚点定位。
转载于:https://www.cnblogs.com/lijianjian/p/9448153.html
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/22630.html
