<!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. 20201101_Python的虚拟环境问题

    虚拟环境使用总结: 1. 安装创建虚拟环境要使用的工具virtualenv  pip install virtualenv -i https://pypi.douban.com/simple/ #使用 ...

  2. （四）CPU主频与”性能“

    一.什么是性能 CPU的性能就是就是时间的倒数,简单来说:耗时越少,性能越好,主要包含下面两个指标: 响应时间:程序执行耗时 吞吐率:单位时间处理数据或执行程序的量 缩短响应时间,一定时间内可以执行更 ...

  3. 偏微分方程数值解法的MATLAB源码

    原文出处http://wenku.baidu.com/view/df412e115f0e7cd184253653.html 因为不太喜欢百度文库的格式,所以写到个人博客里面方便使用 <ifram ...

  4. 第15.14节 PyQt(Python+Qt)入门学习：Designer的Buttons按钮详解

    一.引言 Qt Designer中的Buttons部件包括Push Button(常规按钮.一般称按钮).Tool Button(工具按钮).Radio Button(单选按钮).Check Box( ...

  5. windows cmd 链接远程mysql服务器

    我要链接的mysql 所在ip:192.168.0.110    用户名:root  密码:123 那么: 打开cmd 输入: mysql -h192.168.0.110 -uroot -p123 即 ...

  6. 效率神器-uTools推荐和使用

    提高办公开发效率...非常好用  功能很多很全,官网:https://u.tools/ 文档:https://u.tools/docs/guide/about-uTools.html

  7. css3(::before)伪元素的使用

    1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset=" ...

  8. MySQL事务（一）认识事务

    简单来说,事务就是要保证一组数据库操作,要么全部完成,要么全部失败. 为什么要有事务 数据库中的数据是共享资源,因此数据库系统通常要支持多个用户的或不同应用程序的访问,会出现并发存取数据的现象. 数据 ...

  9. 题解-洛谷P7114 字符串匹配

    题面 洛谷P7114 字符串匹配 \(T\) 组测试数据.给定字符串 \(S\),问有多少不同的非空字符串 \(A\),\(B\),\(C\) 满足 \(S=ABABAB...ABC\) 且 \(A\ ...

  10. EditPlus各个版本的注册码，亲测可用

    原文链接:https://www.cnblogs.com/shihaiming/p/6422441.html EditPlus4注册码 注册名:host1991    序列号:14F50-CD5C8- ...