none
急!!!拖动一个div的滚动条时,同时让上面一个div滚动,为什么上面的div会抖动? RRS feed

  • 问题

  • 打开testPage.html后,滚动下方的滚动条,上面的页面也会相应的滚动,但是出现抖动。请高手解决,急!!!

    测试页面给大家:
    subPage1.html
    <html>
    <head runat="server">
        <title></title>
       <style type="text/css">
          
    .scrollSpanX
    {
        vertical-align: top;
        overflow-x: scroll;
        text-align: left;
    }
    .scrollSpanX TABLE
    {
        table-layout: fixed;
        border-collapse: collapse;
        border-style: none;
        border-spacing: 0px;
        width: 0px;
        border-bottom: 1px #ccc solid;
    }
    .scrollBodyX TR
    {
        position: relative;
    }
    .scrollBodyX TD
    {
        position: relative;
        border-bottom: #e5e5e5 1px solid;
        border-right: #e5e5e5 1px solid;
        background-color: #d2d2d2;
        padding-left: 3px;
        padding-right: 3px;
        white-space: normal;
        letter-spacing: 0px;
        overflow: hidden;
        width: 150px;
        height: 25px;
        word-spacing: 0px;
        padding-top: 0px;
        vertical-align: middle;
        color: Black;
        font-size: 12px;
    }
    .scrollFixedRowX
    {
        position: relative;
        top: expression(this.parentElement.offsetParent.scrollTop);
    }
    .scrollFixedRowX TD
    {
        position: relative;
        font-weight: bold;
        background-color: #ccc;
       
    }
    
    .scrollFixedColX
    {
        position: relative;
        left: expression(this.parentElement.offsetParent.scrollLeft);
        background-color: #E9E9E9;
        z-index: 11;
    }
    
       </style>
    </head>
    <body style="margin:0">
             <div style="width: 100%; bottom: 0px; height: 100%; overflow:hidden;" id="grid" class="scrollSpanX">
            <table class="scrollBodyX">
                <tbody>
                    <tr>
                        <td style="border-bottom: #e5e5e5 1px solid; border-left: #e5e5e5 1px solid; width: 23px;
                            border-top: #e5e5e5 1px solid; border-right: #e5e5e5 1px solid;  " class="scrollFixedColX">
                            <input onclick="ClickAll(this)" type="checkbox">
                        </td>
                        <td style="background-color: #e46d0a;  " class="scrollFixedColX">
                            <a style="width: 145px" class="text-overflow" title="序号">序号</a>
                        </td>
                        <td style="background-color: #e46d0a;  " class="scrollFixedColX">
                            <a style="width: 145px" class="text-overflow" title="BSC编号">BSC编号</a>
                        </td>
                        <td>
                            <a style="width: 145px" class="text-overflow" title="BSC局址">BSC局址</a>
                        </td>
                        <td>
                            <a style="width: 145px" class="text-overflow" title="厂家">厂家</a>
                        </td>
                        <td>
                            <a style="width: 145px" class="text-overflow" title="归属MGW">归属MGW</a>
                        </td>
                        <td>
                            <a style="width: 145px" class="text-overflow" title="MGW局址">MGW局址</a>
                        </td>
                        <td>
                            <a style="width: 145px" class="text-overflow" title="归属Server">归属Server</a>
                        </td>
                        <td>
                            <a style="width: 145px" class="text-overflow" title="Server局址">Server局址</a>
                        </td>
                        <td>
                            <a style="width: 145px" class="text-overflow" title="Gb IP归属CE">Gb IP归属CE</a>
                        </td>
                        <td>
                            <a style="width: 145px" class="text-overflow" title="CE局址">CE局址</a>
                        </td>
                        <td>
                            <a style="width: 145px" class="text-overflow" title="归属SGSN">归属SGSN</a>
                        </td>
                        <td>
                            <a style="width: 145px" class="text-overflow" title="SGSN局址">SGSN局址</a>
                        </td>
                        <td>
                            <a style="width: 145px" class="text-overflow" title="对应TD RNC">对应TD RNC</a>
                        </td>
                        <td>
                            <a style="width: 145px" class="text-overflow" title="管辖范围">管辖范围</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        </body>
    </html>

    subPage1.html

    <html>
    <head runat="server">
        <title></title>
        <style type="text/css">
            .scrollSpanX
            {
                vertical-align: top;
                overflow-x: scroll;
                text-align: left;
            }
            .scrollSpanX TABLE
            {
                table-layout: fixed;
                border-collapse: collapse;
                border-style: none;
                border-spacing: 0px;
                width: 0px;
            }
            .scrollBodyX TR
            {
                position: relative;
            }
            .scrollBodyX TD
            {
                position: relative;
                border-bottom: #e5e5e5 1px solid;
                border-right: #e5e5e5 1px solid;
                background-color: #fff;
                white-space: normal;
                letter-spacing: 0px;
                overflow: hidden;
                width: 150px;
                height: 25px;
                word-spacing: 0px;
                padding-top: 0px;
                vertical-align: middle;
                color: #000;
                font-size: 12px;
            }
            .scrollFixedRowX TD
            {
                position: relative;
                font-weight: bold;
                background-color: #E9E9E9;
            }
            .scrollFixedColX
            {
                position: relative;
                left: expression(this.parentElement.offsetParent.scrollLeft);
                background-color: #E9E9E9;
                z-index: 11;
            }
        </style>
    
        <script type="text/javascript">
    
            function innerTableOnscroll(sender)
            {
                var colHeader = window.parent.frames["colHead"].document.getElementById("grid");
    
                colHeader.scrollLeft = sender.scrollLeft;
            }
     
        </script>
    
    </head>
    <body style="margin: 0">
           <div style="width: 100%; height: 390px; overflow: auto" onscroll="innerTableOnscroll(this)"
            id="gridView" class="scrollSpanX">
            <table style="width: 2123px" class="scrollBodyX">
                <tbody>
                    <tr>
                        <td style="border-left: #e5e5e5 1px solid; background-color: #fff; width: 23px;"
                            class="scrollFixedColX">
                            <input id="93a8889a-b5c2-4b4c-9674-454ccf978270" onclick="ItemClick(this)" type="checkbox">
                        </td>
                        <td style="background-color: #fcd5b4;" class="scrollFixedColX">
                            <a style="width: 145px" class="text-overflow" title="1">1</a>
                        </td>
                        <td style="background-color: #fcd5b4;" class="scrollFixedColX">
                            <a style="width: 145px" class="text-overflow" title="1">1</a>
                        </td>
                        <td style="background-color: #fff">
                            <a style="width: 145px" class="text-overflow" title="1">1</a>
                        </td>
                        <td style="background-color: #fff">
                            <a style="width: 145px" class="text-overflow" title="1">1</a>
                        </td>
                        <td style="background-color: #fff">
                            <a style="width: 145px" class="text-overflow" title="1">1</a>
                        </td>
                        <td style="background-color: #fff">
                            <a style="width: 145px" class="text-overflow" title="1">1</a>
                        </td>
                        <td style="background-color: #fff">
                            <a style="width: 145px" class="text-overflow" title="1">1</a>
                        </td>
                        <td style="background-color: #fff">
                            <a style="width: 145px" class="text-overflow" title="1">1</a>
                        </td>
                        <td style="background-color: #fff">
                            <a style="width: 145px" class="text-overflow" title="1">1</a>
                        </td>
                        <td style="background-color: #fff">
                            <a style="width: 145px" class="text-overflow" title="1">1</a>
                        </td>
                        <td style="background-color: #fff">
                            <a style="width: 145px" class="text-overflow" title="1">1</a>
                        </td>
                        <td style="background-color: #fff">
                            <a style="width: 145px" class="text-overflow" title="1">1</a>
                        </td>
                        <td style="background-color: #fff">
                            <a style="width: 145px" class="text-overflow" title="1">1</a>
                        </td>
                        <td style="background-color: #fff">
                            <a style="width: 145px" class="text-overflow" title="1">1</a>
                        </td>
                    </tr>
                    <tr>
                        <td style="border-left: #e5e5e5 1px solid; background-color: #f8f8f8; width: 23px;"
                            class="scrollFixedColX">
                            <input id="1ada9965-48b6-4523-849f-94d8d754cf95" onclick="ItemClick(this)" type="checkbox">
                        </td>
                        <td style="background-color: #fcd5b4;" class="scrollFixedColX">
                            <a style="width: 145px" class="text-overflow" title="1">1</a>
                        </td>
                        <td style="background-color: #fcd5b4;" class="scrollFixedColX">
                            <a style="width: 145px" class="text-overflow" title="1">1</a>
                        </td>
                        <td style="background-color: #f8f8f8">
                            <a style="width: 145px" class="text-overflow" title="1">1</a>
                        </td>
                        <td style="background-color: #f8f8f8">
                            <a style="width: 145px" class="text-overflow" title="1">1</a>
                        </td>
                        <td style="background-color: #f8f8f8">
                            <a style="width: 145px" class="text-overflow" title="1">1</a>
                        </td>
                        <td style="background-color: #f8f8f8">
                            <a style="width: 145px" class="text-overflow" title="1">1</a>
                        </td>
                        <td style="background-color: #f8f8f8">
                            <a style="width: 145px" class="text-overflow" title="1">1</a>
                        </td>
                        <td style="background-color: #f8f8f8">
                            <a style="width: 145px" class="text-overflow" title="1">1</a>
                        </td>
                        <td style="background-color: #f8f8f8">
                            <a style="width: 145px" class="text-overflow" title="1">1</a>
                        </td>
                        <td style="background-color: #f8f8f8">
                            <a style="width: 145px" class="text-overflow" title="1">1</a>
                        </td>
                        <td style="background-color: #f8f8f8">
                            <a style="width: 145px" class="text-overflow" title="1">1</a>
                        </td>
                        <td style="background-color: #f8f8f8">
                            <a style="width: 145px" class="text-overflow" title="1">1</a>
                        </td>
                        <td style="background-color: #f8f8f8">
                            <a style="width: 145px" class="text-overflow" title="1">1</a>
                        </td>
                        <td style="background-color: #f8f8f8">
                            <a style="width: 145px" class="text-overflow" title="1">1</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
       </body>
    </html>
    testPase.html
    <html>
    <head runat="server">
        <title></title>
    </head>
    <body>
            <div>
            <table id="framesContainer" runat="server" style="width: 100%; height:100%; display: block;" cellpadding="0"
                cellspacing="0">
                <tr style="display:block;">
                    <td height="25px">
                        <iframe id="colHead" name="colHead" frameborder="0" style="width: 100%; height:25px"
                            src="subPage1.html" noresize scrolling="no"></iframe>
                    </td>
                </tr>
                <tr>
                    <td valign="top">
                        <iframe src="subPage2.html" name="view" id="view" frameborder="0" style="width: 100%; height:100%;"
                            noresize scrolling="no"></iframe>
                    </td>
                </tr>
            </table>
        </div>
       </body>
    </html>

    2010年1月28日 3:39

答案

全部回复