如何让DIV随着左右滚动条移动，上下滚动条不变

谷林 2014-09-11 09:31:15

我用下面的方法，感觉总是有卡顿的现象。不是很流畅

           

 $('#PresonnelRightDivBody').scroll(function () {

                document.getElementById("PresonnelHeadTable").style.marginLeft = (0 - document.getElementById('PresonnelRightDivBody').scrollLeft) + "px";

            });

如果加延迟的话，有感觉滚动条移动中对的不齐。

请问有什么好的解决方案么？

PS:
为了实现一个超大的表格（大于屏幕的高度和宽度，所以必须保持标题的位置）

...全文

3756 12 打赏收藏转发到动态举报

写回复

用AI写文章

12 条回复

切换为时间正序

请发表友善的回复…

发表回复

weixin_42656284 2018-08-09

打赏
举报

能否用纯css实现？不使用JS

谷林 2016-06-08

打赏
举报

引用 9 楼 wzn721721 的回复:

你这是要实现表头固定并且有水平和垂直滚动条？我认为你的实现过于麻烦了除了这个js代码 $('#PresonnelRightDivBody').scroll(function () { document.getElementById("PresonnelHeadTable").style.marginLeft = (0 - document.getElementById('PresonnelRightDivBody').scrollLeft) + "px"; }); 其他的都可以用css控制至于你所说的顿卡的现象，曾经我也遇到过，不过问题不严重没有去解决。

你这个数据少的话没问题，我那个页面有去空行之后将近2MB的页面内容，这样实现起来ie8 根本没法使用。

mnxm 2016-06-02

打赏
举报

你这是要实现表头固定并且有水平和垂直滚动条？我认为你的实现过于麻烦了除了这个js代码 $('#PresonnelRightDivBody').scroll(function () { document.getElementById("PresonnelHeadTable").style.marginLeft = (0 - document.getElementById('PresonnelRightDivBody').scrollLeft) + "px"; }); 其他的都可以用css控制至于你所说的顿卡的现象，曾经我也遇到过，不过问题不严重没有去解决。

谷林 2016-06-01

打赏
举报

引用 7 楼 qq_34971337 的回复:

http://bbs.csdn.net/topics/390882789怎么搞这个页面的源码，，，我觉得这个就是我要的效果。。。

什么意思？这个是自己实现的

qq_1323129435 2016-05-12

打赏
举报

http://bbs.csdn.net/topics/390882789怎么搞这个页面的源码，，，我觉得这个就是我要的效果。。。

wz_307 2014-09-12

打赏
举报

引用 5 楼 liu86815 的回复:

[quote=引用 4 楼 u012280941 的回复:] 既然標題不要隨滾動位置改變那就不要放在一起就好了，該想的不是做法，而是架構

办法找到了，虽然不是很完美，但基本可以了。根据不同滚动条的事件改变标题的位置，左右滑动，就放在和内容统一DIV。上下滚动就放在内容外的DIV


    <script type="text/javascript">
        var lt = 0;
        var islt = false;

        $(function () {
            var otherH = (($('.ctoolbar').length * 26) + ($('.ftitle').length * 26) + 15);
            $('#PresonnelRightDiv').css('height', document.documentElement.clientHeight - otherH);
            $('#PresonnelRightDivBody').css('height', document.documentElement.clientHeight - (otherH + $('#PresonnelHeadTable').height()));


            $('#PresonnelRightDivBody').scroll(function () {
                var tislt = document.getElementById('PresonnelRightDivBody').scrollLeft;
                //左右滚动
                if (lt != tislt) {
                    if (islt == true) {
                        lt = tislt;
                        return;
                    }
                    $('#PresonnelHeadTable').insertBefore($('#PresonnelRightDivBody').find('table:eq(0)'));
                    document.getElementById("PresonnelHeadTable").style.marginLeft = 0 + "px";
                    document.getElementById("PresonnelHeadTable").style.marginTop =  document.getElementById('PresonnelRightDivBody').scrollTop + "px";
                    islt = true;
                } 
                //上下滚动
                if (lt == tislt) {
                    if (islt == false) {
                        lt = tislt;
                        return;
                    }
                    $('#PresonnelHeadTable').insertBefore($('#PresonnelRightDivBody'));
                    document.getElementById("PresonnelHeadTable").style.marginTop = 0 + 'px';
                    document.getElementById("PresonnelHeadTable").style.marginLeft = (0 - tislt) + "px";
                    islt = false;
                }
            });
        });

    </script>

[/quote] 饿..还是蛮纠结的. 不过明确一个原则: 尽量少的改变DOM结构, 少让DOM重绘, 绝对对性能有好处还有既然用jq了, 就用$("#id").css()来设置, 加载着写好奇怪; 高度用.height(val)来设置

谷林 2014-09-12

打赏
举报

引用 4 楼 u012280941 的回复:

既然標題不要隨滾動位置改變那就不要放在一起就好了，該想的不是做法，而是架構

办法找到了，虽然不是很完美，但基本可以了。根据不同滚动条的事件改变标题的位置，左右滑动，就放在和内容统一DIV。上下滚动就放在内容外的DIV


    <script type="text/javascript">
        var lt = 0;
        var islt = false;

        $(function () {
            var otherH = (($('.ctoolbar').length * 26) + ($('.ftitle').length * 26) + 15);
            $('#PresonnelRightDiv').css('height', document.documentElement.clientHeight - otherH);
            $('#PresonnelRightDivBody').css('height', document.documentElement.clientHeight - (otherH + $('#PresonnelHeadTable').height()));


            $('#PresonnelRightDivBody').scroll(function () {
                var tislt = document.getElementById('PresonnelRightDivBody').scrollLeft;
                //左右滚动
                if (lt != tislt) {
                    if (islt == true) {
                        lt = tislt;
                        return;
                    }
                    $('#PresonnelHeadTable').insertBefore($('#PresonnelRightDivBody').find('table:eq(0)'));
                    document.getElementById("PresonnelHeadTable").style.marginLeft = 0 + "px";
                    document.getElementById("PresonnelHeadTable").style.marginTop =  document.getElementById('PresonnelRightDivBody').scrollTop + "px";
                    islt = true;
                } 
                //上下滚动
                if (lt == tislt) {
                    if (islt == false) {
                        lt = tislt;
                        return;
                    }
                    $('#PresonnelHeadTable').insertBefore($('#PresonnelRightDivBody'));
                    document.getElementById("PresonnelHeadTable").style.marginTop = 0 + 'px';
                    document.getElementById("PresonnelHeadTable").style.marginLeft = (0 - tislt) + "px";
                    islt = false;
                }
            });
        });

    </script>