首页 > 其他分享 >使div上下左右都有滚动条

使div上下左右都有滚动条

时间:2022-12-12 10:11:13浏览次数:37  
标签:AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA Layer1 innerHTML 滚动条 

使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 onl oad="init()">
    <!-- layer-background-color: #CCCCCC;属性不受支持以及呈现的效果 -->
    <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:100px; 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
        AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
        AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
        AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
        AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
        AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
    </div>
    <div id="Layer3" style="position:absolute; width:17px; height:100px; 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>

效果

 

 

 

标签:AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA,Layer1,innerHTML,滚动条,
From: https://www.cnblogs.com/zhaofen/p/16975351.html

相关文章