js的Element.scrollIntoView的学习

2018-06-24 01:34:14来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

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 会有一些低配版本的手机不支持

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:JavaScript面向对象学习笔记

下一篇:设置cookie,删除cookie,读取cookie