js的Element.scrollIntoView的学习

2018-02-28 07:47:00来源:cnblogs.com作者:冰泪恋心人点击

分享

1、Element.scrollIntoView()

   该方法让当前元素滚动到浏览器窗口的可是区域内;

2、语法:
element.scrollIntoView();//等同于element.scrolIntoView(true)
element.scrollIntoView(alignToTop);//Boolean型参数
element.scrollIntoView(scrollIntoViewOptions);//Object型参数

参数
alignToTop:true--- 元素的顶端和器所在滚动区的可视区域顶端对齐
true 相当于{block:start}
false--- 元素的底端将和其所在滚动区的可视区域底端对齐
false 相当于{block:end}
scrollIntoViewOptions:一个boolean值或一个带有选项的object
{
behavior:'auto' | 'instant'|'smooth',
block:'start' | 'end'
}
 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4     <meta charset="UTF-8"> 5     <title>scrollToView的学习</title> 6     <style> 7         #containers{ 8             background-color: black; 9             width:300px;10             height:50px;11             display: flex;12             justify-content: space-around;13             position: fixed;14             left:42.1%;15         }16         .clear{17             height:50px;18         }19         .title{20             color: #ffffff;21         }22         #title1-item,#title2-item,#title3-item{23             width:300px;24             height:800px;25             border:1px solid #dddddd;26             margin: auto;27             margin-bottom: 20px;28             box-sizing: border-box;29             padding-top: 50px;30         }31     </style>32 </head>33 <body>34  <div id="containers">35      <div data-target="#title1-item" class="title">商品</div>36      <div data-target="#title2-item" class="title">详情</div>37      <div data-target="#title3-item" class="title">评价</div>38  </div>39  <div class="clear"></div>40  <div id="title1-item">商品对应的部分</div>41  <div id="title2-item">详情对应的部分</div>42  <div id="title3-item">评价对应的部分</div>43  <script type="text/javascript">44      var aHref = document.getElementsByClassName('title');45      var title1Item = document.getElementById('title1-item');46      var title2Item = document.getElementById('title2-item');47      var title3Item = document.getElementById('title3-item');48      console.log(aHref[0]);49      aHref[0].onclick=function(){50          title1Item.scrollIntoView(true);51 52      };53      aHref[1].onclick=function(){54          title2Item.scrollIntoView(false);55 56      };57      aHref[2].onclick=function(){58          title3Item.scrollIntoView();59      }60  </script>61 </body>62 </html>
3、浏览器支持
scrollIntoViewOptions IE浏览器,Safari 不支持
IE8版本以下,Safari 5.0版本以下 不支持 "smooth" 属性 和 "center" 设置项.
Firefox 36 不支持 "inline" 设置项。不支持设置项的值 "nearest" 或 "center"。
移动端:
scrollIntoViewOptions 会有一些低配版本的手机不支持

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台