网站首页 » 前端开发 » JavaScript » JavaScript 关于元素滚动的多种场景
上一篇:
下一篇:

JavaScript 关于元素滚动的多种场景

在这里文章虽然说是多种场景,其实说白也就是元素的内容滚动,只是对象不一样罢了(如:body 或者 div)。怎么实现元素滚动到其内容的指定位置?实现元素滚动到底部有什么应用场景?等这些问题一个个从脑中浮现。现在让我们来看看怎么实现。

首先我们最常用见或者最常用的就是浏览器默认的滚动元素 body,比如滚动到页面指定的位置,或者滚动到页面的底部,这太常见了。但是在本文中我们不用 body 来作为例子,我们用一个 div 来替代 body 来实现标题中的元素滚动。

HTML 代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素内容滚动到底-云库前端博客</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body>
<div class="header"></div>
<div id="scroll-container">
    <ul>
        <li>元素滚动条 item 1</li>
        <li>元素滚动条 item 2</li>
        <li>元素滚动条 item 3</li>
        <li>元素滚动条 item 4</li>
        <li>元素滚动条 item 5</li>
        <li>元素滚动条 item 6</li>
        <li>元素滚动条 item 7</li>
        <li>元素滚动条 item 8</li>
        <li>元素滚动条 item 9</li>
        <li>元素滚动条 item 10</li>
        <li>元素滚动条 item 11</li>
        <li>元素滚动条 item 12</li>
        <li>元素滚动条 item 13</li>
        <li>元素滚动条 item 14</li>
        <li>元素滚动条 item 15</li>
        <li>元素滚动条 item 16</li>
        <li>元素滚动条 item 17</li>
        <li>元素滚动条 item 18</li>
        <li>元素滚动条 item 19</li>
        <li>元素滚动条 item 20</li>
        <li>元素滚动条 item 21</li>
        <li>元素滚动条 item 22</li>
        <li>元素滚动条 item 23</li>
        <li>元素滚动条 item 24</li>
        <li>元素滚动条 item 25</li>
        <li>元素滚动条 item 26</li>
        <li>元素滚动条 item 27</li>
        <li>元素滚动条 item 28</li>
        <li>元素滚动条 item 29</li>
        <li>元素滚动条 item 30</li>
        <li>元素滚动条 item 31</li>
        <li>元素滚动条 item 32</li>
        <li>元素滚动条 item 33</li>
        <li>元素滚动条 item 34</li>
        <li>元素滚动条 item 35</li>
        <li>元素滚动条 item 36</li>
        <li>......</li>
        <li id="target-item">元素滚动条 item n-2</li>
        <li>元素滚动条 item n-1</li>
        <li>元素滚动条 item n</li>
    </ul>
</div>
<div class="footer"></div>
</body>
</html>
CSS 代码
*{
    padding: 0;
    margin: 0;
}
.header,.footer{
    width: 100%;
    background: #000;
    position: fixed;
    height: 45px;
    background: #23282d;

}
.header{
    top: 0;
}
.footer{
    bottom:0;
}
#scroll-container{
    margin: 45px 0;
    height: 400px;
    border: 1px solid #ccc;
    overflow: auto;
}
#scroll-container ul{
    list-style: none;
    padding-left: 15px;
    border: 1px solid #ccc;
}
#scroll-container ul li{
    padding: 6px 0;
}
JavaScript 代码
var scrollContainer = document.getElementById("scroll-container");
var scrollContent = document.getElementsByTagName("ul")[0];
var tagetItem = document.getElementById("target-item");
var scrollHeight = scrollContent.offsetHeight - scrollContainer.clientHeight;
scrollContainer.scrollTop = scrollHeight;

// 只是无聊打印出来看看
console.log(scrollContainer.offsetHeight);
console.log(scrollContent.offsetHeight);
console.log(scrollHeight);

例子可以看这里,这个是滚动到元素底部的代码,线上 DEMO 可以看这里:http://yunkus.com/demo/javascript-scroll-element-scroll-multiple-scenes/

在上面的例子中,有些地方我们还是需要注意下的就是分别求 scrollContainer 和  scrollContent 的高度时,用的是 clientHeight 和 offsetHeight 。这就得根据实现情况来了,因为有时候我们会给里面的元素添加边框(比如:本例子),只要我们弄明白这两个属的作用,就很容易明白这里为什么会这么写。

上面这个例子看明白了后,页面的滚动底部就是小菜一碟了。还有一种情况,那就是如果不是要让要滚动到元素内容的最后,而是元素的指定位置,那又怎么办?

方法也很简单,我们只需要给指定位置的元素添加一个 id (用于获取该元素而已,没有什么别的意思)。然后通过获取这个元素距离顶部的高度,再让滚动条滚动到指定位置就可以了,道理是差不多的。上面的 HTML 代码中我们已经给目标位置相应的元素添加了了一个 id。我们对上面的代码稍作修改就可以了(只需要修改 JavaScipt 代码)

看这里
var scrollContainer = document.getElementById("scroll-container");
var scrollContent = document.getElementsByTagName("ul")[0];
var tagetItem = document.getElementById("target-item");
var scrollHeight = tagetItem.offsetTop - scrollContainer.offsetTop - getStyle(scrollContainer,"borderTop");
scrollContainer.scrollTop = scrollHeight;

// 获取元素指定样式
function getStyle(obj,attr){
    if(obj.currentStyle){
        return obj.currentStyle[attr];
    }else{
        return getComputedStyle(obj,false)[attr];
    }
}

这样就可以滚动到指定的位置了。其中 getStyle(scrollContainer,”borderTop”) 就是获取元素的上边框。

这里只是给大伙分享下思路,具体怎么做,还得根据实践情况来。不过大体的思路就这样。

当然,例子中的上中下布局在实际的开始中一般都会不像上面这样布局,具体的方案可以看这里《移动端布局解决方案》。

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/javascript-scroll-element-scroll-multiple-scenes/

Leave a Reply

Your email address will not be published. Required fields are marked *

评论 END