<!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. Docker中搭建FastDFS文件系统（多图）

    关于FastDFS FastDFS 是以 C 语言开发的一项开源轻量级分布式文件系统,他对文件进行管理,主要功能有:文件存储,文件同步,文件访问(文件上传/下载)等,特别适合以文件为载体的在线服务,如 ...

  2. Spring Cloud Alibaba 初体验(五) SkyWalking

    一.下载与运行 本文使用 SkyWalking 7.0.0:https://www.apache.org/dyn/closer.cgi/skywalking/7.0.0/apache-skywalki ...

  3. Spring Boot + Elasticsearch 使用示例

    本文分别使用 Elasticsearch Repository 和 ElasticsearchTemplate 实现 Elasticsearch 的简单的增删改查 一.Elastic Stack El ...

  4. k8s实验操作记录文档

    k8s实验操作记录文档,仅供学习参考! 文档以实验操作的过程及内容为主进行记录,涉及少量的介绍性文字(来自网络开源). 仅汇总主题所有链接,详细内容查看需要切换到相关链接.https://github ...

  5. Python正则表达式re.findall一个有趣的现象

    下面通过几个案例来分析一下, 注意:本节的parsematch函数请参考<妙用re.sub分析正则表达式解析匹配过程> 案例一: >>> re.findall(r&quo ...

  6. tensorflow GPU的使用

    参考:https://blog.csdn.net/mzpmzk/article/details/78647711 import os # 默认情况,TF 会占用所有 GPU 的所有内存, 我们可以指定 ...

  7. 小米k30 pro刷国际版rom

    时间:2020.8.20 最新的是miui12但是普遍反映耗电量巨大,所以还是刷miui11了. 知乎上有个教程:https://zhuanlan.zhihu.com/p/86160027 但是是针对 ...

  8. jwt 简单基本使用加密解密

    import jwt # 加密 encode_jwt=jwt.encode({'uid':'123'},'密钥123',algorithm='HS256') print(encode_jwt) # 解 ...

  9. Python开发：一个直播弹幕机器人诞生过程，自动发送弹幕

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理. Python爬取B站弹幕视频讲解 https://www.bilibili.com/vide ...

  10. 字节跳动内部微服务架构-Docker实战学习笔记分享 真香

    前言 基于 Spring Cloud 的微服务设计和开发,已经越来越多地得到了更多企业的推广和应用,而 Spring Cloud 社区也在不断的迅速发展壮大之中,近几年时间,Spring Cloud ...