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

    安装虚拟机redhat7u4-64 镜像文件在http://www.linuxfly.org/post/659 更换yum 参考https://blog.csdn.net/xiaoyiaoyou/ar ...

  2. angular2 学习笔记 ( Dynamic Component 动态组件)

    更新 2018-02-07 详细讲一下 TemplateRef 和 ViewContainerRef 的插入 refer : https://segmentfault.com/a/1190000008 ...

  3. SpringCloud的服务注册中心（二）注册中心服务端和两个微服务应用客户端

    一.构建EurekaServer工程 1.pom.xml 2.application.yml 3. EurekaServerApp.java 4.启动EurekaServer 二.构建部署 Eurek ...

  4. java stream 原理

    java stream 原理 需求 从"Apple" "Bug" "ABC" "Dog"中选出以A开头的名字,然后从中选 ...

  5. redis中的aof模式，产生的是增量数据，还是全量数据？

    先说答案:全量数据. 1.修改redis.conf,开启rdb,禁用aof 上面这个是持久化文件的路径,我们ll看下: 2.启动redis后,cli查看里面的key [root@mini1 redis ...

  6. Spring源码情操陶冶-任务定时器ConcurrentTaskScheduler

    承接前文Spring源码情操陶冶#task:scheduled-tasks解析器,本文在前文的基础上讲解单核心线程线程池的工作原理 应用附例 承接前文的例子,如下 <!--define bean ...

  7. 学习linux的一些指令

    简单说一下我对linux的理解,linux只有一个根目录,所有目录都挂在该根目录上,磁盘进行分区,然后生成文件系统,挂到目录上,/etc/fstab用于记录系统配置,比如分区挂载点,开机自动挂载等等. ...

  8. 前端监控系统（二）JS错误日志收集篇

    前端监控系统 目前已经上线,欢迎使用! 服务器搭建好了,可以着手开发了. 其实前端需要分析的数据有很多,包括,PVUV, 接口请求统计,耗时统计,JS错误统计,用户使用设备统计,用户地域分布,页面用户 ...

  9. Python基础Day01

    Python介绍 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为ABC语言 ...

  10. Virtual Box下虚拟机复制后ip地址重复

    通过桥接模式上网的虚拟机在复制之后,出现三台机器的ip地址都是一样的,还都可以上网, 主要是因为在复制的时候,把网卡信息啥的都一起复制了, 为了设置为不同的ip,需要修改复制后的机器的mac地址. 首 ...