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

    最近在做项目交互的时候,刚开始向后台传递数据返回415,后来百度添加了 contentType:"application/json"之后返回400,然后把传输的数据格式改为json ...

  2. Tcl与Design Compiler （五）——综合库（时序库）和DC的设计对象

    本文如果有错,欢迎留言更正:此外,转载请标明出处 http://www.cnblogs.com/IClearner/  ,作者:IC_learner 前面一直说到综合库/工艺库这些东西,现在就来讲讲讲 ...

  3. spark2.1：读取hive中存储的多元组（string,double）失败

    这两天和同事一起在想着如何把一个表的记录减少,表记录包含了:objectid(主小区信息),gridid(归属栅格),height(高度),rsrp(主小区rsrp),n_objectid(邻区),n ...

  4. Oracle12c：创建主分区、子分区，实现自动分区插入效果

    单表自动单个分区字段使用方式,请参考:<Oracle12c:自动分区表> 两个分区字段时,必须一个主分区字段和一个子分区字段构成(以下代码测试是在oracle12.1版本): create ...

  5. Tensorflow模型加载与保存、Tensorboard简单使用

    先上代码: from __future__ import absolute_import from __future__ import division from __future__ import ...

  6. SQL发音考（搜寻SQL-86标准）

    据我观察,中国的开发者创造了一种独特的SQL发音:/'sɜːkl/,既好听,又好读,挺好的.但是今年我开始做数据库相关的工作,作为一个专业人士,决定对SQL发音进行一些考证. 直接说结论吧,很多人沿用 ...

  7. linux-非root用户运行tomcat

    # 前言:为什么要使用非root用户运行tomcat root用户启动tomcat有一个严重的问题,那就是tomcat具有root权限. 这意味着你的任何一个页面脚本(html/js)都具有root权 ...

  8. [LeetCode] Split Concatenated Strings 分割串联字符串

    Given a list of strings, you could concatenate these strings together into a loop, where for each st ...

  9. Markdown 编辑器使用指南

    Markdown 编辑器使用指南 1.快捷键 加粗: Ctrl/Cmd + B 标题: Ctrl/Cmd + H 插入链接: Ctrl/Cmd + K 插入代码: Ctrl/Cmd + Shift + ...

  10. Fetching data with Ajax小例子

    ajax获取数据示例: 示例1 通过ajax获取txt文件里面的内容示例: <html> <head> <title>Ajax at work</title& ...