<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<title>autoScroll</title>

</head>

<style>

.parent {

width: 300px;

height: 200px;

margin: 0 auto;

background: #242424;

overflow-y: scroll;

}

/*设置的子盒子高度大于父盒子，产生溢出效果*/

.child {

height: auto;

}

.child li {

height: 50px;

margin: 2px 0;

background: #009678;

}

</style>

<body>

<div id="parent" class="parent">

<div id="child1" class="child">

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

<li>5</li>

<li>6</li>

<li>7</li>

<li>8</li>

<li>8</li>

<li>8</li>

<li>8</li>

<li>8</li>

<li>8</li>

<li>8</li>

</div>

<!-- <div id="child2" class="child"></div> -->

</div>

<script type="text/javascript">

(function () {

var parent = document.getElementById('parent');

var child1 = document.getElementById('child1');

setInterval(function () {

console.log(parent.scrollTop,child1.scrollHeight,parent.scrollHeight)

if(parent.scrollTop >= child1.clientHeight-parent.clientHeight) {

parent.scrollTop = 0;

} else {

parent.scrollTop++;

}

}, 20);

})()

</script>

</body>

</html>

　　

js实现页面消息滚动效果的更多相关文章

  1. Space.js – HTML 驱动的页面 3D 滚动效果

    为了让我们的信息能够有效地沟通,我们需要创建用户和我们的媒体之间的强有力的联系.今天我们就来探讨在网络上呈现故事的新方法,并为此创造了一个开源和免费使用的 JavaScript 库称为 space.j ...

  2. js实现文字上下滚动效果

    大家都知道,做html页面时,为了提升网页的用户体验,我们需要在网页中加入一些特效,比如单行区域文字上下滚动就是经常用到的特效.如下图示效果: <html> <head> &l ...

  3. js文字展示各种滚动效果

    js文字展示各种滚动效果:http://www.dowebok.com/demo/188/

  4. JS学习笔记之页面信息滚动效果

    效果截图: 1.无缝滚动效果 JS代码: <script> window.onload=function(){ var oInfobox=document.getElementById(' ...

  5. js 实现文字列表滚动效果

    今天要实现抽奖名单在首页滚动展示的效果,就用js写了一个,代码如下: html代码: <style type="text/css"> *{margin:;padding ...

  6. js 实现单行文本滚动效果

    js 代码如下: /***************滚动场次开始*****************/ function ScrollText(content, btnPrevious, btnNext, ...

  7. js控制页面每次滚动一屏，和楼梯效果

    我最近在做我们公司官网的改版,产品中心就是每次滚一屏的,我觉得加上楼梯更方便用户浏览,就随便写了个demo, 先来看看结构,都很简单的 <!--楼梯--> <ul class=&qu ...

  8. js实现消息滚动效果

    <div class="inform" style=""> <div style="height:35px; overflow:hi ...

  9. JS实现页面回到顶部效果

    [代码] <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

随机推荐

  1. 20200221_python虚拟环境在Windows下安装配置_virtualenv不是内部或外部命令也不是可运行的程序或批处理文件

    1. 使用管理员启动命令行; 2. 安装虚拟环境 a)      .\pip install virtualenv  -i https://pypi.douban.com/simple/ b)     ...

  2. arcgis性能检测记录

    参考了一下文章,先记录下: http://www.mamicode.com/info-detail-1973690.html https://wenku.baidu.com/view/140c4880 ...

  3. HTTP协议数据包

    HTTP数据包 简介:由w3c制定的一种网络应用层协议,定义了浏览器与web服务器之间通信时所使用的数据格式. 0x00 数据包格式 1.请求行:请求类型/请求资源路径.协议的版本和类型 2.请求头: ...

  4. Linux 硬盘挂载及开机挂载

    一.分区 主分区.扩展分区.逻辑分区的区别 主分区:包含操作系统启动所必需的文件和数据的硬盘分区,如需在硬盘上安装操作系统,该硬盘必须得有一个主分区 扩展分区:除主分区外的分区,不能直接使用,必须再划 ...

  5. Flutter——Dart Extension扩展方法的使用

    dart的extension方法可以给已经存在的类添加新的函数,通过extension我们可以封装一些常用方法,提高开发效率. 例一:扩展String 给string添加一个log打印方法 exten ...

  6. PyQt(Python+Qt)学习随笔：Qt Designer中连接Action和槽函数

    在Designer中试了半天,终于找到了Action添加槽函数的方法,操作步骤: 在Designer右边界面中点击鼠标右键 确保信号/槽编辑被勾选,如图是未勾选的情况:. 勾选后会出现信号和槽的编辑界 ...

  7. 什么时候使用transition?什么时候使用animation？

    不同点: 1. 触发条件不同.transition通常和hover等事件配合使用,由事件触发.animation则和gif动态图差不多,立即播放. 2. 循环. animation可以设定循环次数. ...

  8. python最大几个数和最小几个数（堆排序）

    最大几个数和最小几个数 import heapq a = [7, 5, 3, 4, 8, 6, 0] cc = heapq.nsmallest(2, a) #最小的两个数 dd = heapq.nla ...

  9. 前端删除多条数据，如何将多个被删除项指定key传给后台

    实际情景: 前端需要移除多个用户,这时需要根据每个用户id进行批量删除操作 前端操作: 1. 拿到所有被操作用户的信息存入数组, 例如 userlist = [user1, user2, user3] ...

  10. 高速缓冲存储器Cache

    目录 概述 问题的提出 局部性原理 命中与未命中 Cache的命中率 Cache-主存系统的效率 例题 工作原理 地址映射方式(本节最重要) 直接映射 全相联映射 组相联映射 例子 替换策略 例题 写 ...