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

最新推荐文章于 2023-06-16 16:52:19 发布

救救非儿吧

最新推荐文章于 2023-06-16 16:52:19 发布

阅读量2.3k

点赞数 1

文章标签： html5 javascript

本文链接：https://blog.csdn.net/l851285812/article/details/106411125

版权

该例程可以实现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部分参照网友例程。感谢！