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

    ThinkPHP框架有路由的概念,看起来路由更多的是后端的事情,Angular怎么也会跑出个路由呢?事实上,Angular是着眼于单页应用的,他的一个应用一般来说是一个页面,你所看到的页面内容的改变, ...

  2. 阿里云API网关（4）快速入门（开放 API）

    网关指南: https://help.aliyun.com/document_detail/29487.html?spm=5176.doc48835.6.550.23Oqbl 网关控制台: https ...

  3. hadoop2.7.3+spark2.1.0+scala2.12.1环境搭建（1）安装jdk

    一.文件准备 下载jdk-8u131-linux-x64.tar.gz 二.工具准备 2.1 Xshell 2.2 Xftp 三.操作步骤 3.1 解压文件: $ tar zxvf jdk-8u131 ...

  4. 【52ABP实战教程】0.3-- 从github推送代码回vsts实现双向同步

    需求 在之前的文章中"[DevOps]如何用VSTS持续集成到Github仓库" 我们有讲述如何将vsts中的代码编译推送到github中,这一篇我们来完善,如果有人给你开源项目推 ...

  5. NHibernate从入门到精通系列(2)——NHibernate环境与结构体系

    内容摘要 NHibernate的开发环境 NHibernate的结构体系 NHibernate的配置 一.NHibernate的开发环境 NHibernate的英文官方网站为:http://nhfor ...

  6. ejs注释问题

    项目中遇到一个问题: 代码如下: 但是代码如下时,却不会出现bug: bug的导火索是ejs的注释: 因为我没有用对注释,所以被注释部分的if语句仍旧生效了. bug的根本原因是没有对mod类型进行判 ...

  7. 翻译：JVM虚拟机规范1.7中的运行时常量池部分（三）

    4.4.7. The CONSTANT_Utf8_info Structure The CONSTANT_Utf8_info structure is used to represent consta ...

  8. 彻底理解了call()方法，apply()方法和bind()方法

    javascript中的每一个作用域中都有一个this对象,它代表的是调用函数的对象.在全局作用域中,this代表的是全局对象(在web浏览器中指的是window).如果包含this的函数是一个对象的 ...

  9. ZOJ-2913 Bus Pass---BFS进阶版

    题目链接: https://vjudge.net/problem/ZOJ-2913 题目大意: 问哪个区域到公交路线上所有区域的最大距离最小 思路: 这里要求出到底是哪个区域到某些指定区域的最大距离最 ...

  10. AngularJS 全局scope与指令 scope通信

    在项目开发时,全局scope 和 directive本地scope使用范围不够清晰,全局scope与directive本地scope通信掌握的不够透彻,这里对全局scope 和 directive本地 ...