scrollIntoView()的用法

时间:5年前   阅读:5446

在滚动事件中绑定回调的应用场景非常多,如图片的懒加载、下滑自动加载数据、侧边浮动导航栏等,用户浏览网页时,拥有平滑滚动经常是被忽视但却是用户体验中至关重要的部分

scrollIntoView

  元素的scrollIntoView()方法支持一传入一个options,设置为smooth时,即可实现平滑滚动

ele.scrollIntoView({ behavior: 'smooth' })

  但是,该效果的兼容性不太好,移动端和IE都不支持

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			ul{
  padding: 0;
  margin: 0;
  list-style: none;
}

.con{
  width: 260px;
  display: flex;
  justify-content:space-around;
  line-height: 30px;
  background: #333;
  color: #fff;
}
.con li {
  cursor: pointer;
}
.showBox{
  width: 260px;
  height: 100px;
  overflow: hidden;
}
.show li {
  height: 100px;
  text-align: center;
  line-height: 100px;
  background: lightgreen;
}
.show li:nth-of-type(2){
	background: lightblue;
}
.show li:last-child{
	background: pink;
}
		</style>
	</head>
	<body>
		<ul class="con" id="con">
  <li>首页</li>
  <li>Html/Css</li>
  <li>JavaScript</li>
</ul> 
<div class="showBox">
  <ul class="show" id="show">
    <li>首页</li>
    <li>Html/Css</li>
    <li>JavaScript</li>
  </ul> 
</div>
<script type="text/javascript">
	  const con = document.getElementById('con')
  const show = document.getElementById('show')
  const showChildren = show.children
   Array.prototype.slice.call(con.children).map((item, index) => item.scrollTarget = showChildren[index])
  con.addEventListener('click', e => {
    const { target} = e
    if (target.nodeName === 'LI') {
      target.scrollTarget.scrollIntoView({ behavior: 'smooth' })
    }
  })
</script>
	</body>
</html>

效果图片展示(具体效果点上面的运行代码来看):

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

上一篇:上证50ETF期权波澜乍起 持仓总量创新高

下一篇:期权交易轻仓、止损这些道理都懂,为什么就是做不到?

网友评论

请先 登录 再评论,若不是会员请先 注册