div及iframe滚动条固定为最底端

该例程可以实现iframe和div的滚动条固定到最底端。

<!DOCTYPE>
<html>
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>div及iframe滚动条控制</title>
</head>
<body><div><h3>将div滚动条保持在最底部的方法</h3><div><span>请点击“插入一行”按钮，插入最新信息，当出现滚动条时，滚动条将自动保持在底部。</span><br /><div id="scrolldIV" style="overflow:auto; height: 100px; width: 100%; border: 1px solid;"></div><input type="button" value="插入一行" onclick="add();"> </div></div><br /><h3 id="example_title">将iframe滚动条保持在最底部的方法</h3><span>点击“Lock”按钮，锁定到iframe最底端。点击“Unlock”解锁</span><br /><div style="width:100%;height:400px; border: 1px solid;"><iFrame id="iFrame1" name="iFrame1" src="https://www.taobao.com/"width="100%" height="100%" scrolling="yes" frameborder="0"></iFrame></div> <button id="Lock_Button" onclick="LockDown()">Lock</button><script>const view = document.getElementById('iFrame1');const LockButton = document.getElementById('Lock_Button');function add(){var now = new Date();var div = document.getElementById('scrolldIV');div.innerHTML = div.innerHTML + 'time_' + now.getTime() + '<br />';div.scrollTop = div.scrollHeight;}var t1 = window.setInterval(SkipDown,100);window.clearInterval(t1); function SkipDown(){ iFrame1.scrollBy(0,999999)} function LockDown(){const streamEnabled = LockButton.innerHTML === 'Lock'if (streamEnabled) {t1 = window.setInterval(SkipDown,1);LockButton.innerHTML = 'Unlock';} else {window.clearInterval(t1); LockButton.innerHTML = 'Lock';}}</script>
</body>
</html>

div部分参照网友例程。感谢！

div及iframe滚动条固定为最底端相关推荐

聊天框让滚动条保持到最底端的一种方式 scrollTop!
通过使用scrollTop来实现 <!DOCTYPE html> <html lang="en"> <head><meta charset ...
微信小程序-实现两个按钮固定在页面底端且不随页面滑动（静态页面）
微信小程序的文件主要由wxml,wxss,js,json四部分组成,其实和web开发很类似,就是多了一个json文件,里面写的是一些配置文件.对页面布局的处理,主要就是通过编写wxss文件. 先看一些 ...
C#实现textBox滚动条自动滚到最底端
1.配置textBox的Multiline属性为true: 2.配置textBox的ScrollBars属性为Vertical,实现纵向滚动条: 3.然后如下语句实现自己滚动: private voi ...
按钮固定在页面底端html,css实现按钮固定在底部
NSArray函数 1.判断是否包含某一个元素,返回1则表示有 - (BOOL)countainsObject:(id)anObject BOOL isContain = [arrayboy cont ...
如何改变iframe滚动条的样式？
如何改变iframe滚动条的样式?web前端开发cssjavascriptiframehtmlRayLiao 2014年11月19日提问 · 2014年11月20日更新关注4关注收藏0 收藏,3. ...
html 超出部分被遮挡,div被iframe遮住的几种情况及解决方法
类似结构: 复制代码代码如下: https://caibaojian.com">> 第一种:透明背景被遮住当div使用透明的背景时,无论是使用(opacity或者rgba格式) ...
在html中加入滚动条,html在div中显示滚动条
基本思路:滚动条要添加到内容部分的父标签上(div),内容部分不设置大小,父标签要明确设置大小,并且父标签要添加overflow样式,并设置成auto. 打开的效果如下: 这时可能有人会问,父div的 ...
如何让DIV模块随着页面固定和不固定
最近做公司官网,左边文章列表,右边文章详情,要求左边文章列表随着页面向上滚动到某个位置时,固定在页面顶部,当滚动到footer出现时,div模块随页面滚动而不再固定在顶部. 思路: 1,给外层的div ...
隐藏iframe滚动条，并禁止滑动
隐藏iframe滚动条当我们通过 iframe 展示图片,或是通过 iframe 展示 PDF文件时,如果图片和 PDF 超出 iframe设置的宽高,就会出现横纵向的滚动条,如下图.当 ifra ...

div及iframe滚动条固定为最底端

div及iframe滚动条固定为最底端相关推荐

最新文章

热门文章