还在为无缝滚动而烦恼？是时候彻底get到这个知识点了

最新推荐文章于 2024-10-09 10:14:38 发布

weixin_34123613

最新推荐文章于 2024-10-09 10:14:38 发布

阅读量104

点赞数

文章标签：移动开发 javascript ViewUI

原文链接：https://segmentfault.com/a/1190000005138317

版权

最近一直在忙公司炒股大赛的页面，终于在昨天把他给上线了。一个看似简单的页面，做起来才知道其中的艰辛，暗藏深坑。由于直接使用jquery来写页面逻辑，因此要比想象中复杂很多。无论是从布局，功能还是逻辑上来说，都有值得总结的地方。

这篇文章主要说说关于无缝滚动的实现。

刚开始学习js的时候，真心觉得无缝滚动是一个神奇的功能。背后到底是怎么回事？为什么明明只有几个方块就是滚不到头？后来明白了原理之后，发现原来是通过一些障眼法来实现。

原理

假如需要无缝滚动的4个元素是一个ul.items中的6个li.item。我们将控制ul.items在容器.wrap中滚动。html代码如下:

ul.items表示className为items的ul元素，其他地方同理

<div class="wrap">
    <ul class="items"><!--
    --><li class="item"><img src="https://static.tigerbrokers.com/portal/images/cooperation/stockGame/v2-partner0.8a07a886.jpg" alt=""></li><!--
    --><li class="item"><img src="https://static.tigerbrokers.com/portal/images/cooperation/stockGame/v2-partner1.56bcecb3.png" alt=""></li><!--
    --><li class="item"><img src="https://static.tigerbrokers.com/portal/images/cooperation/stockGame/v2-partner2.9a7e8842.jpg" alt=""></li><!--
    --><li class="item"><img src="https://static.tigerbrokers.com/portal/images/cooperation/stockGame/v2-partner3.47acdfbd.png" alt=""></li><!--
    --><li class="item"><img src="https://static.tigerbrokers.com/portal/images/cooperation/stockGame/v2-partner5.e9205d49.jpg" alt=""></li><!--
    --><li class="item"><img src="https://static.tigerbrokers.com/portal/images/cooperation/stockGame/v2-partner6.83b14a71.png" alt=""></li><!--
    --></ul>
</div>

我们的目标是实现水平方向上的滚动，因此需要li.item水平排列。能够达到目标的方式常用的有使用float: left，或者使用display: inline-block。我们知道控制页面元素的移动无非就是控制元素的left, top, translateX, translateY，还有一种就是控制滚动距离scrollTop, scrollLeft。布局的选择，同时也会影响到js控制属性的选择。

本例选择使用display: inline-block布局，并控制ul.items的scrollLeft值，让整个ul滚动起来。布局上需要注意的有以下几点：

超出容器的部分需要隐藏，注意，此处的隐藏是给ul.items的，注意与float: left布局的差别。
```
.items { overflow: hidden; }
```
ul.items的内容不能折行，因此
```
.items { white-space: nowrap; }
```

需要适配到移动端，因此li.item的宽度就必然会随着设配宽度的变小而变小。

@media (max-width: 780px) {
    .item {
        width: 190px;
    }
}

@media (max-width: 580px) {
    .item {
        width: 160px;
    }
}

html布局中的是为了消除display: inline-block元素之间带来的间隙。

那么无缝滚动的障眼法到底是什么呢？本来用图片描述会更加直观一点，不过这里我想偷个懒，用文字给大家讲述一下，希望大家能看懂。

我们有子元素123456，一个一个向左滚动，复制一份，就变成123456123456。如果我们在整体移动到第二个1的时候，将整体的位置拉回到第一个1来，也就是初始位置，由于有div.items的overflow: hidden在，中间发生的变化我们没办法用肉眼识别出来，就感觉是一直在向左移动，永远都停不下来。

表达能力有限，如果没懂再结合代码理解一下吧，或者留言给我

功能实现

一说到运动，我们常常想到的方法可能是利用setTimeout或者setInterval, 不过呢，html5为我们提供了一个更加高性能的方法requestAnimationFrame。

在性能上，requestAnimationFrame > setTimeout > setInterval。具体原因大家可以找找相关的资料了解一下。而setTimeout的最小定时值为100/60，因此，我们在实现运动时，从性能与兼容性两方面考虑，常常会如下声明：

var lastTime = 0,
    nextFrame = window.requestAnimationFrame       ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame    ||
                window.msRequestAnimationFrame     ||
                function(callback) {
                    var currTime = + new Date,
                        delay = Math.max(1000/60, 1000/60 - (currTime - lastTime));
                    lastTime = currTime + delay;
                    return setTimeout(callback, delay);
                },
    cancelFrame = window.cancelAnimationFrame               ||
                  window.webkitCancelAnimationFrame         ||
                  window.webkitCancelRequestAnimationFrame  ||
                  window.mozCancelRequestAnimationFrame     ||
                  window.msCancelRequestAnimationFrame      ||
                  clearTimeout;

我们需要知道滚动到什么位置回退到0，这个位置刚好就是复制之前所有子元素加一起的总长度。但是子元素的宽度会因为设备宽度的改变而改变，因此配合布局，我们需要作如下处理：

// 单个子元素的宽度
var itemW = 240;
if ($items.children().eq(0).width() == 190) {
    itemW = 190;
}
if ($items.children().eq(0).width() == 160) {
    itemW = 160;
}

// 目标位置
var target = itemW * $items.children().length;

为了实现障眼法，需要复制一份子元素

$items.html( $items.html() + $items.html() );

定义一个运动函数，这里的运动为匀速运动，因此比较简单，只需要一直+1即可。如果需要运动快一点，就多加一点

var timer = null;

function adAni() {
    timer = nextFrame(function() {
        scrollX += 1;

        // 当递增到大于了目标距离，就直接变为0
        if (scrollX >= target) {
            scrollX = 0;
        }
        $items.scrollLeft(scrollX);
        adAni();
    });
}

// 运行这个函数就可以实现无缝滚动啦。
adAni();

这样无缝滚动就已经实现了。不过还有一些其他的需求。比如，鼠标mouseover时，需要停止滚动，离开之后又要重新启动滚动。因为需求的变化，在移动端还需要能够滑动items.ul，手指松开之后继续滚动。因此我们需要一个区别pc于移动端的函数。通过UA的不同来区分。

function isMobile() {
    return /(iphone|ipad|ipod|ios|android|mobile|blackberry|iemobile|mqqbrowser|juc|fennec|wosbrowser|browserng|Webos|symbian|windows phone)/i.test(navigator.userAgent);
}

在pc端，鼠标移入时停止，鼠标移除时继续滚动

if (!isMobile()) {
    $items.on('mouseover', function() {
        cancelFrame(timer);
    }).on('mouseout', function() { adAni(); });
}

在移动端，可以左右滑动，滑动时停止自动滚动，松开之后继续自动滚动。移动端的滑动事件，主要通过touchstart, touchmove, touchend来实现，与pc端的mousedown, mousemove, mouseup类似。

var sX, sL;
$items.on('touchstart', function(e) {
    cancelFrame(timer);
    sX = e.originalEvent.changedTouches[0].pageX;
    sL = $items.scrollLeft();
}).on('touchmove', function(e) {
    var dis = e.originalEvent.changedTouches[0].pageX - sX;
    var nowX = sL - dis;
    if (nowX > target) {
        nowX = 0;
    }
    $items.scrollLeft(nowX);
}).on('touchend', function(e) {
    scrollX = $items.scrollLeft();
    if (scrollX >= target) {
        scrollX = 0;
    }
    adAni();
})

那么到这里，就已经基本搞定啦。虽然是一个比较简单的小例子，但是其中也包含了一些常用的功能，比如使用requestAnimationFrame来实现运动，移动端的滑动事件等。在这里总结一下分享给大家，有疑问欢迎探讨。

实例地址：
http://codepen.io/yangbo5207/...