在项目开发中尤其是在项目的活动页面的开发中，经常需要将用户的购买信息或中奖信息等以列表的形式展示在页面当中，并可以使其自动间歇向上滚动来达到在有限的区域内展示所有信息的目的。通常的做法是通过将列表父元素的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>

原生js移动端列表无缝间歇向上滚动的更多相关文章

  1. jquery无缝间歇向上滚动(间断滚动)

    jquery无缝间歇向上滚动 JS部份 $(function(){ var $this = $(".renav"); var scrollTimer; $this.hover(fu ...

  2. jQuery无缝间歇向上滚动

    http://www.jiangweishan.com/article/jQuery-scroll-up.html

  3. 利用自定义动画 animate() 方法，实现某图书网站中“近 7 日畅销榜”中的图书无缝垂直向上滚动特效:当光标移入到图书上时，停止滚动，鼠标移开时，继续滚动

    查看本章节 查看作业目录 需求说明: 利用自定义动画 animate() 方法,实现某图书网站中"近 7 日畅销榜"中的图书无缝垂直向上滚动特效:当光标移入到图书上时,停止滚动,鼠 ...

  4. 原生js移动端touch事件实现上拉加载更多

    大家都知道jQuery里没有touch事件,所以在移动端使用原生js实现上拉加载效果还是很不错的,闲话不多说,代码如下: //获取要操作的元素 var objSection = document.ge ...

  5. 纯原生js移动端图片压缩上传插件

    前段时间,同事又来咨询一个问题了,说手机端动不动拍照就好几M高清大图,上传服务器太慢,问问我有没有可以压缩图片并上传的js插件,当然手头上没有,别慌,我去网上搜一搜. 结果呢,呵呵...诶~又全是基于 ...

  6. 纯原生js移动端城市选择插件

    接着上一篇纯js移动端日期选择插件,话说今天同事又来咨询省市县联动的效果在移动端中如何实现,还是老样子,百度上一搜,诶~又全是基于jquery.zepto的,更加可恨的是大多数都是PC版的,三个sel ...

  7. 列表内容自动向上滚动（原生JS）

    效果展示 (鼠标移入,滚动停止:鼠标移出,滚动继续) 实现原理 1. html结构:核心是ul > li,ul外层包裹着div.因为想要内容循环滚动无缝衔接,所以在原有ul后面还要有一个一样内容 ...

  8. js实现文字列表无缝向上滚动

    body{font-size:12px} #demo{overflow:hidden; height:80px; width:280px; margin:90px auto; position:rel ...

  9. 原生js移动端滑动事件

    移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...

随机推荐

  1. Java-NIO（二）：缓冲区(Buffer)的数据存取

    缓冲区(Buffer): 一个用于特定基本数据类行的容器.有java.nio包定义的,所有缓冲区都是抽象类Buffer的子类. Java NIO中的Buffer主要用于与NIO通道进行交互,数据是从通 ...

  2. JDK1.8源码(七)——java.util.HashMap 类

    本篇博客我们来介绍在 JDK1.8 中 HashMap 的源码实现,这也是最常用的一个集合.但是在介绍 HashMap 之前,我们先介绍什么是 Hash表. 1.哈希表 Hash表也称为散列表,也有直 ...

  3. POJ-2263 Heavy Cargo---最短路变形&&最小边的最大值

    题目链接: https://vjudge.net/problem/POJ-2263 题目大意: 有n个城市,m条连接两个城市的道路,每条道路有自己的最大复载量.现在问从城市a到城市b,车上的最大载重能 ...

  4. NetCore2.0技术文章目录

    记录NetCore2.0的学习和工作,理解对与错不重要,重要的是,我飘~~~过 ------------------------------------------------------------ ...

  5. 1.0 添加WEB API项目并按注释生成文档（多项目结构）

    1.新建ASP.NET 项目,模板选择如图 2.选择Web API,并选择不进行身份验证方式 成功后我们看到这个结果. 至于其它三种身份验证方式,不太适合我的使用.而且这种方式也可以在代码里去实现身份 ...

  6. 关于require.js的模块化开发

      先是自己打了一些demo,然后回过头来看阮大神的博客,感觉很多莫名其妙的问题,瞬间解决了:很舒服,放上链接,希望对其他人也有帮助:     先是在html的末尾引入了require.js . da ...

  7. thinphp验证码的简单实现

    index.html <!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  8. [LeetCode] Non-negative Integers without Consecutive Ones 非负整数不包括连续的1

    Given a positive integer n, find the number of non-negative integers less than or equal to n, whose ...

  9. python包安装和使用机制

    python语言的魅力之一就是大量的外置数据包,能够帮助使用者节省很多时间,提高效率.模块下载和引用是最常见的操作,现在解析内部的原理和背后发生的故事,做到心里有数. 导航: 基本定义 模块使用 模块 ...

  10. Python网络爬虫笔记（二）：链接爬虫和下载限速

    (一)代码1(link_crawler()和get_links()实现链接爬虫) import urllib.request as ure import re import urllib.parse ...