让DIV上下左右都出现scroll滚动条

最新推荐文章于 2024-08-16 09:26:52 发布

djk8888

最新推荐文章于 2024-08-16 09:26:52 发布

阅读量1.5k

点赞数 1

分类专栏： html

原文链接：https://bbs.csdn.net/topics/30105884?list=272009

版权

HTML CSS JavaScript overflow 滚动条

关键词由CSDN通过智能技术生成

html 专栏收录该内容

97 篇文章 1 订阅

订阅专栏

style=" overflow:auto" 只能让 div 的 “下面”和“右面”出现滚动条

怎么让 div 上面和左面出现滚动条？

<html>
<head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <script language="JavaScript">
        function init() {
            Layer2.innerHTML = Layer1.innerHTML;
            Layer3.innerHTML = Layer1.innerHTML;
        }
    </script>
</head>

<body onLoad="init()">
    <div id="Layer2" style="position:absolute; width:200px; height:17px; z-index:2; left: 353px; top: 73px; overflow: scroll;" onscroll="Layer1.scrollLeft=this.scrollLeft">
    </div>
    <div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:4; left: 353px; top: 92px; background-color: #CCCCCC; layer-background-color: #CCCCCC; border: 1px none #000000; overflow: scroll;" onscroll="Layer2.scrollLeft=this.scrollLeft;Layer3.scrollTop=this.scrollTop">
        AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
        <br style=" overflow:auto">
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
    </div>
    <div id="Layer3" style="position:absolute; width:17px; height:115px; z-index:5; left: 334px; top: 92px; overflow: scroll; visibility: visible; background-color: #FFFFFF; layer-background-color: #FFFFFF; border: 1px none #000000;" onscroll="Layer1.scrollTop=this.scrollTop">
    </div>
</body>
</html>

（复制以上代码粘贴到html文件里即可看到效果）

预览：