HTML中 scrollTop++ 不能够实现div向上滚动的原因
假设有三个层，id分别是：demo,demo1,demo2,包含关系如下：即，demo 包含demo1和demo2;
HTML代码：
<div id="demo" style="background-color:#ff0000; width:500px;height:200px;overflow: hidden;" >
<div id="demo1" style="width:500px;height:200px;background-color:yellow">
</div>
<div id="demo2" style="width:500px;height:200px;background-color:pink">
</div>
</div>
JS代码：
<script type="text/javascript">
document.getElementById("demo2").innerHTML=document.getElementById("demo1").innerHTML;
document.getElementById("demo2").style.backgroundColor="blue";
function let(){
document.getElementById("demo").scrollTop++;
}
var myTime=setInterval("let()",100);
</script>
1.外层div 的overflow属性没有设置为“hidden”,不会显示滚动效果；
2.内层div(这里指的是demo1和demo2)的高度之和没有超过外层div的高度；本例子来说：demo1 高度200 +demo2高度 200=400px必须大于demo的高度200px才会出现滚动。
3.何时滚动会停止？内部最下面的div(本例子demo2)的底部与外层div(demo)底部齐平时停止滚动！
如果要不停滚动可以修改js代码：
<script type="text/javascript">
document.getElementById("demo2").innerHTML=document.getElementById("demo1").innerHTML;
function let(){
if(document.getElementById("demo").scrollTop>=parseInt(document.getElementById("demo1").style.height)){
document.getElementById("demo").scrollTop=0;
}
else{
document.getElementById("demo").scrollTop++;
}
}
var myTime=setInterval("let()",10);
</script>
由于style.height属性只能取得行内样式的值，如果换成currentstyle或者document.getComputedStyle("",null)还需要判断，所以最好使用demo2的offsetHeight
<script type="text/javascript">
document.getElementById("demo2").innerHTML=document.getElementById("demo1").innerHTML;
function let(){
if(document.getElementById("demo").scrollTop>=document.getElementById("demo2").offsetTop){
document.getElementById("demo").scrollTop=0;
}
else{
document.getElementById("demo").scrollTop++;
}
}
var myTime=setInterval("let()",10);
</script>
但是这里一定要注意offsetTop包含外层div(demo)的padding,demo2的offsetTop要大于200;也就是说如果demo1的高度和demo2若刚好等于demo的高度则demo的scrollTop永远不会达到临界点即document.getElementById("demo").scrollTop>=document.getElementById("demo2").offsetTop，因为在此之前就停止卷动。scrollTop++没有作用
HTML中 scrollTop++ 不能够实现div向上滚动的原因相关推荐
- Vue中实现文字向上滚动的动画效果
在Vue中,想要实现文字向上滚动的效果,分成两种情况: 1 无缝滚动 无缝滚动如图: 我说的无缝滚动主要是指两点: 滚动中没有停顿 从头至尾再循环播放时没有停顿 实现这种情况可以使用CSS3的动画实现 ...
- 中奖人员信息向上滚动
最近公司搞一个抽奖转盘,然后下面有个中奖人列表信息,向上滚动的效果,在网上找了好了好多demo,不过他们大部分都有些小问题,因为我的数据第动态添加进来的,所以会导致重复叠加div向上滚动,这样太耗性能 ...
- html 向上滚动 不间断,向上不间断滚动div+css+js模板
div+css不间断向上滚动模板 上一次给大家介绍一种div css的不间断滚动代码JS特别多(不间断滚动css代码),这次给大家介绍的是比较实用比较简单的不间断css滚动代码 DIV+CSS不间断滚 ...
- html 滚动条 scrolltop scrollheight,浅谈JavaScript中scrollTop、scrollHeight、offsetTop、offsetHeight...
浅谈JavaScript中scrollTop.scrollHeight.offsetTop.offsetHeight 发布时间:2020-07-17 09:27:20 来源:亿速云 阅读:223 作者 ...
- scrolltop 原生js_jQuery 中 scrollTop;原生的js怎么写
展开全部 你好,我先需要明确e69da5e6ba9062616964757a686964616f31333337386538一下你是要问jQuery中scrollTop获取滚动条距顶端的距离,还是要使 ...
- 在html中加入滚动条,html在div中显示滚动条
基本思路:滚动条要添加到内容部分的父标签上(div),内容部分不设置大小,父标签要明确设置大小,并且父标签要添加overflow样式,并设置成auto. 打开的效果如下: 这时可能有人会问,父div的 ...
- js中加载指定的html代码,在js或JQuery中怎样判断页面html代码中含有指定名称的div元素...
在我们制作网页的过程中,想要在某个页面中的某一元素中添加新的内容,而不想改动那个页面,我们一般会直接在全局的jsz中直接加入document.getElementById("指定id&quo ...
- 关于MUI框架中，“侧滑导航“之“div模式下拉菜单“的a标签（超链接）的失效问题？
关于MUI框架中,"侧滑导航"之"div模式下拉菜单"的a标签(超链接)的失效问题? 截图和讲解图片的顺序如下所示: 图1 图2 · 官方的截图 图3 · 官方 ...
- div iframe 显示html,IE中iframe标签显示在DIV之上的问题解决方案
在做网页时前端时,使用IE打开时会出现标题栏DIV被遮挡PDF遮挡, 后在stackoverflow中查到是IE浏览器的问题:链接https://stackoverflow.com/questions ...
最新文章
- Linux下MySQL登录报错1045,linux下 root 登录 MySQL 报错的问题
- Atitit. 软件GUIbutton与仪表盘--webserver区--获取apache配置文件路径 linux and apache的启动、停止、重新启动...
- python 系统进程_在Python中监视所有系统进程
- win7 X64 编译ffmpeg
- c 语言 timestamp,c中的时间戳,精度为毫秒
- pyjion python3.6_pyjion python3.6
- JAVA面试题，比较经典的面试题
- CTS(20)---CTS测试框架 -- V2版本
- 什么是PV UV PR值
- 浅谈C/C+内存管理、内存泄漏、堆栈
- hadoop组件官方源和国内源
- 自然语言处理的学习心得
- 加拿大计算机工程研究生,加拿大维多利亚大学电子与计算机工程系副教授诚招硕士研究生 - 导师招生 - 小木虫 - 学术 科研 互动社区...
- 脱壳入门（一）之分析Aspack壳
- 固定table首行或尾行
- lua php 触摸精灵,触动精灵,触摸精灵-lua脚本入门
- python框架支持套接字么_Python的框架比较：Django，金字塔，水瓶，Sanic，旋风，BottlePy等等...
- 关于高速光耦6n137的使用总结_高速光耦6n137典型应用电路图汇总（多谐振荡/光电隔离器/光耦开关）...
- 云脉档案管理系统助力档案信息化建设
- 组织结构图的画法——office的应用