滚动信息条的两种展示方法

无间歇直接滚动
间歇式滚动

HTML

<div id="recoder_con">
    <div id="recoder_ul1"></div>
    <div id="recoder_ul2"></div>
</div>

CSS

.recoder-con{
    display: inline-block;
    width: 584px;     //指定宽度
    height: 280px;    //指定高度
    overflow: scroll;
    overflow-x: hidden;
    overflow-y: hidden;
}

无间歇JS

function  prizeScroll(listNum) {
        var speed = 65,
                wap = document.getElementById("recoder_con"),
                ul1 = document.getElementById("recoder_ul1"),
                ul2 = document.getElementById("recoder_ul2");

        ul2.innerHTML = ul1.innerHTML;
        var leftHeight;

        if (listNum > 4) {
            leftHeight = 0;
        } else if (listNum == 4) {
            leftHeight = 33;
        }

        function Marquee2() {
            if (ul2.offsetTop - wap.scrollTop <= leftHeight) {
                wap.scrollTop -= ul1.offsetHeight;
            } else {
                wap.scrollTop++;
            }
        }
        var MyMar2 = setInterval(function () {
            Marquee2();
        }, speed);

    }
    prizeScroll(4)

有间歇JS

var wap = $('#recoder_con'),
            ul1Html = $('#recoder_ul1').html(),
            ul2 = $('#recoder_ul2');

    var speed = 50,
            listNum = 4,
            delay = 1000,
            liHeight = 21,
            time,
            scrollTop = 0;

            ul2.html(ul1Html);

    function startScroll() {
        time = setInterval("scrollUp()", speed);
        wap.scrollTop(scrollTop++);
    }
    function scrollUp(){
        if(scrollTop % liHeight == 0){
            clearInterval(time);
            setTimeout(startScroll,delay);
        }else{
            wap.scrollTop(scrollTop++);
            if(scrollTop >= (listNum -1) * liHeight){
                scrollTop = 0;
                wap.scrollTop(scrollTop);
            }
        }
    }
    setTimeout('startScroll()',delay);

2017-02-08

解决IOS滑动不畅问题

[TOC]
@(welcome)[前端菜鸟|掘金中]

在编写移动端页面时,遇到一个很奇怪的问题,IOS向来滑动通畅,体验度明显甩开安卓十条街,但是在添加了上拉刷新下拉加载加载的插件后,IOS瞬间滑动不畅,慢成一坨.
那赶脚就像,拖着汽车往前走的老哞…
起初以为是插件底层的滑动事件影响了IOS,去掉插件之后,依然卡顿如初,what?!
仔细对比之后,终于找到罪魁祸首,竟然是两行熟悉到不行的css

body,html{
    height: 100%;
    overflow: auto;
}

通过查找，终于找到了解决问题的方法

1	-webkit-overflow-scrolling: touch;

这个属性只兼容移动版 Safari iOS 5.0+，而且它有两个值

1
2

-webkit-overflow-scrolling: touch; /* 当手指从触摸屏上移开，会保持一段时间的滚动 */
-webkit-overflow-scrolling: auto; /* 当手指从触摸屏上移开，滚动会立即停止 */

####auto

使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。

####touch

使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。

``将这行代码放到我的根标签后，我的小苹果又再次欢快的跑起来了！正当我高兴的时候，又发现了一个问题，我写的固定定位导航条随着苹果的告诉滑动，出现了鬼畜情况！

``也就是说，我需要将我的固定定位排除在滑动之外！

``上代码

body,html{
       height: 100%;
       overflow: auto;
   }
   .scroll{
       height: 100%;
       overflow: auto;
       -webkit-overflow-scrolling: touch;
   }

要滚动的部分给父元素加上class类scroll,需要注意的是设置的两个overflow形成了两个滚动条，很容易造成滚动问题，建议在苹果浏览器下调试好。

博主原创文

2016-11-17