原生js移动端列表无缝间歇向上滚动

在项目开发中尤其是在项目的活动页面的开发中，经常需要将用户的购买信息或中奖信息等以列表的形式展示在页面当中，并可以使其自动间歇向上滚动来达到在有限的区域内展示所有信息的目的。通常的做法是通过将列表父元素的margin-top或top在一定间隔内以负值逐渐减小一行的高度的形式来实现，那么今天，我们就通过列表父元素的scrollTop属性来实现这样的效果（其实原理都差不多）。

具体代码如下：

<!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>
posted @ 2017-12-15 13:38  豫见世家公子  阅读(2253)  评论(0)  编辑  收藏  举报