<!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. 数据库原理-事务隔离与多版本并发控制(MVCC)

    刚来美团实习,正好是星期天,不得不说,其内部的资料很丰富,看了部分文档后,对数据库事务这块更理解了.数据库事务的ACID,大家都知道,为了维护这些性质,主要是隔离性和一致性,一般使用加锁这种方式.同时 ...

  2. spring + quartz 分布式自定义注解

    相关技术 本文采用spring + quartz的方案.使用mysql作为任务的持久化,支持分布式. 自定义注解 1.启用定时任务 @Target(ElementType.TYPE) @Retenti ...

  3. 第一章、PyQt的简介、安装与配置

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 第一章.PyQt的简介.安装与配置 一.引言 当朋友向我推荐PyQt时,老猿才知道有这样一个在Pyt ...

  4. centos7最小安装后——网络配置、常见命令安装，远程连接、yum源安装软件包

    安装环境 #软件:vmware 14 #centos版本:CentOS-7-x86_64-DVD-1810 下载地址: #网络配置:NAT模式 配置 网络配置 #动态获取ip: centos7最小安装 ...

  5. XDown单文件版 下载工具 支持磁力等多种链接方式下载

    原来的程序不带剪辑板探测,不支持迅雷链接等 增加功能后优化制作单文件版本. 下载类型为下图 magnet:?xt=urn:btih:836A228D932EF1C7EA1DD99D5D80B7CB0C ...

  6. 合并EXCEL文件到一个文件的V宏

    我建的宏: Sub 合并文件的VBA() Dim MyPath, MyName, AWbName Dim Wb As Workbook, WbN As String Dim G As Long Dim ...

  7. 【WHash】更有空间感的感知哈希

    转载请注明出处 背景 在重复图识别领域,对于识别肉眼相同图片,感知哈希效果是很鲁棒的.上一篇文章 [PHash]更懂人眼的感知哈希 介绍的PHash识别效果很好,但是它有一个缺点,只关注低频信息,并没 ...

  8. 升级jenkins之后无法启动 报错Unable to read /var/lib/jenkins/config.xml

    故障记录 点击jenkins升级后再点击回滚到之前版本,jenkins就起不来了. 欲哭无泪,报错如下 hudson.util.HudsonFailedToLoad: org.jvnet.hudson ...

  9. Elastic Search 学习之路（三）—— tutorial demo

    一.ElasticSearch tutorial demo example 1. 单机.local.CRUD操作 实现方式: SpringBoot + ElasticSearch 拷贝的小demo,原 ...

  10. Ubuntu系统升级

    转自:Ubuntu14.04升级到18.04 查看当前版本 lsb_release -a 执行更新 apt-get update apt-get upgrade apt dist-upgrade 重启 ...