zoukankan      html  css  js  c++  java
  • JQuery Div层滚动条控制(模拟横向滚动条在最顶端显示)

    想让DIV层滚动条显示在顶端,CSS样式没找到相关属性,于是用2个DIV层来模拟做了一个。
    经测试IE浏览器上显示并不太美观!不知道是否还有更好的办法可以实现这功能呢?

     
    aaaaaaasssssssdddddddfffffffgggggggghhhhhhhhhjjjjjjjjkkkkkkkkllllllllll
    aaaaaaasssssssdddddddfffffffgggggggghhhhhhhhhjjjjjjjjkkkkkkkkllllllllll
    aaaaaaasssssssdddddddfffffffgggggggghhhhhhhhhjjjjjjjjkkkkkkkkllllllllll
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function () {
                $("#div2").css("overflow-x", "scroll").height(16).width($("#div1").width()+20); //设置一个高度10的DIV2层 长度与DIV1层一致
                $("#div2").html($("#div1").html()); //并给DIV2层填充内容
    
                $("#div2").scroll(function () {
                    $("#div1")[0].scrollLeft = $("#div2")[0].scrollLeft; //拉动DIV2层滚动条,DIV1层滚动条同步被改变
                });
            });
        </script>
    </head>
    <body>
    <p></p>
    <div id="div2"></div>
    <div id="div1" style="border-style: solid; border- 1px; border-color: inherit; 150px; height:120px; overflow-x:scroll; ">
    aaaaaaasssssssdddddddfffffffgggggggghhhhhhhhhjjjjjjjjkkkkkkkkllllllllll<br />
    aaaaaaasssssssdddddddfffffffgggggggghhhhhhhhhjjjjjjjjkkkkkkkkllllllllll<br />
    aaaaaaasssssssdddddddfffffffgggggggghhhhhhhhhjjjjjjjjkkkkkkkkllllllllll<br />
    </div>
    </body>
    </html>
  • 相关阅读:
    上传图片到PHP服务器
    关于对象、数字、地理位置使用上需要注意的地方
    apiCloud app调用浏览器打开网页的方法
    APICloud开发小技巧(一)
    JavaScript数组操作函数
    超实用的JavaScript代码段
    JSESSIONID的简单说明
    数据库锁表及阻塞的原因和解决办法
    Spring详解------事务管理
    HttpServletrequest 与HttpServletResponse总结
  • 原文地址:https://www.cnblogs.com/han1982/p/3234093.html
Copyright © 2011-2022 走看看