原生js移動端列表無縫間歇向上滾動

時間 2019-11-22

原文原文鏈接

在項目開發中尤爲是在項目的活動頁面的開發中，常常須要將用戶的購買信息或中獎信息等以列表的形式展現在頁面當中，並能夠使其自動間歇向上滾動來達到在有限的區域內展現全部信息的目的。一般的作法是經過將列表父元素的margin-top或top在必定間隔內以負值逐漸減少一行的高度的形式來實現，那麼今天，咱們就經過列表父元素的scrollTop屬性來實現這樣的效果（其實原理都差很少）。html

具體代碼以下：web

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<meta name="format-detection" content="telephone=no">
<title>原生js移動端列表無縫間歇向上滾動</title>
<script>
//計算根節點HTML的字體大小
function resizeRoot(width){
    var deviceWidth = document.documentElement.clientWidth,
        num = width,
        num1 = num / 100;
    if(deviceWidth > num){
        deviceWidth = num;  
    }
    document.documentElement.style.fontSize = deviceWidth / num1 + "px";
}
//根節點HTML的字體大小初始化
resizeRoot(750);

window.onresize = function(){
    resizeRoot(750);
};
</script>
<style>
*{margin:0;padding:0;outline:0;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
body{font-family:"Helvetica";color:#909090;background:#f1f4f7;font-size:.28rem;max-width:750px;min-width:300px;margin:0 auto;}
li{list-style-type:none;}
.scroll_tit{overflow:hidden;background:#ff8644;margin:.3rem .3rem 0;}
.scroll_tit li{float:left;height:.72rem;line-height:.72rem;color:#fff;width:33.33%;}
.scroll_tit li:nth-child(1), .scroll_content li span:nth-child(1){padding-left:.3rem;}
.scroll_tit li:nth-child(2), .scroll_content li span:nth-child(2){text-align:center;}
.scroll_tit li:nth-child(3), .scroll_content li span:nth-child(3){text-align:right;padding-right:.3rem;}
.scroll_content{background:#fff;border:1px solid #ff8644;padding:.1rem 0;margin:0 .3rem;overflow:hidden;}
.scroll_content li{overflow:hidden;height:.54rem;line-height:.54rem;font-size:.26rem;color:#333;}
.scroll_content li span{float:left;width:33.33%;}
</style>
</head>
<body>
<ul class="scroll_tit">
    <li>用戶名</li>
    <li>購買金額</li>
    <li>收益率</li>
</ul>
<div class="scroll_content" id="scroll_content">
    <ul>
        <li><span>152*****066</span><span>1000</span><span>30%</span></li>
        <li><span>136*****121</span><span>1000</span><span>30%</span></li>
        <li><span>158*****356</span><span>1000</span><span>30%</span></li>
        <li><span>134*****258</span><span>1000</span><span>30%</span></li>
        <li><span>137*****122</span><span>1000</span><span>30%</span></li>
        <li><span>159*****523</span><span>1000</span><span>30%</span></li>
        <li><span>151*****885</span><span>1000</span><span>30%</span></li>
        <li><span>183*****461</span><span>1000</span><span>30%</span></li>
        <li><span>185*****052</span><span>1000</span><span>30%</span></li>
        <li><span>136*****551</span><span>1000</span><span>30%</span></li>
    </ul>
</div>
<script>
var scrollArea = document.getElementById('scroll_content');
var li = scrollArea.getElementsByTagName("li");
if(li.length < 10){
    scrollArea.style.height = (li[0].offsetHeight * li.length) + 10 + "px";
}else{
    scrollArea.style.height = (li[0].offsetHeight * 9 ) + 10 + "px";
    //滾動
    var liHeight = li[0].offsetHeight;   //單行滾動的高度
    var speed = 20;      //滾動的速度
    var timer;
    var delay = 3000;    //滾動的間隔
    scrollArea.scrollTop = 0;
    scrollArea.innerHTML += scrollArea.innerHTML;
    function startScroll(){
        timer = setInterval(scrollUp, speed);
        scrollArea.scrollTop++;
    }
    function scrollUp(){
        if(scrollArea.scrollTop % liHeight == 0){
            clearInterval(timer);
            setTimeout(startScroll, delay);
        }else{
            scrollArea.scrollTop++;
            if(scrollArea.scrollTop >= scrollArea.scrollHeight / 2){
                scrollArea.scrollTop = 0;
            }
        }
    }
    setTimeout(startScroll, delay);
}       
</script>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。