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

    下载地址 http://www.mysql.com/downloads/mysql/ 端口号:3306 用户名:root 密码:自定义 连接到MySQL服务器 >mysql -uroot -pr ...

  2. jQuery兼容浏览器IE8方法

    在维护公司网站的时候,发现在IE8下jquery会报对象不支持此属性或方法.缺少对象的错误:  在其他浏览器就可以正常运行,当前使用的jquery版本是3.1.1,查资料发现jquery从2.0开始不 ...

  3. iot前台开发环境：请求示例

    参考链接:http://www.cnblogs.com/keatkeat/category/872790.html 编辑->update保存 一.typescipt import { Injec ...

  4. 详解Ajax请求（一）前言——同步请求的原理

    我们知道,ajax是一种异步请求的方式,想要了解异步请求,就必须要先从同步请求说起.常见的同步请求的方式是form表单的提交,我们先从一种同步请求的示例说起. 我们希望输入姓名可以从后台得到身份证号. ...

  5. leetcode算法：Next Greater Element I

    You are given two arrays (without duplicates) nums1 and nums2 where nums1's elements are subset of n ...

  6. An invalid character [32] was present in the Cookie value 错误

    今天在做cookie部分的demo的时候出现了一个错误Servlet部分的代码如下 Date data=new Date(); SimpleDateFormat format=new SimpleDa ...

  7. c语言清屏、等待、随机函数

    清屏函数 #include<conio.h> system("CLS");或system(cls); 等待函数 #include<windows.h>  S ...

  8. Ubuntu+apt-get update时的源

    源是通过 /etc/apt/sources.list # file /etc/apt/sources.list.d # dir 来确定的, 只要将其中的相应文件/相应行删除了, 在apt-get up ...

  9. 百度tn劫持解决办法

    最近用右键进行百度搜索的时候总是会跳转到 tn=99135173这类的小尾巴,使得搜索失败,十分恶心,这种广告劫持的手段十分高明隐蔽,很难发觉.开始以为是dns劫持或者是电脑中毒了,更换了几个dns, ...

  10. 学习React系列（七）——Fragments、Portals、Error Boundaries与WEB组件

    React.Fragment portals Error Boundaries WEB组件 React.Fragment 想象一个场景,想把td包装为组件添加到table中去,代码如下: class ...