jquery 当div的所有部分都可见时，如何阻止页面滞后？

ee7vknir 于 2023-04-05 发布在 jQuery

关注(0)|答案(1)|浏览(80)

我的HTML文件是2845行长.和主要内容是大约1523行长.我的内容是滞后的，当我在内容之间滚动.文件卡住.它也有一个选择标记，有助于在内容之间轻松导航.当选择选项A将显示部分A，选项B将显示部分B，和，选项C将显示A和B两个部分。这只是一个例子，主页有12个这样的选项。
那么有什么方法可以停止滞后呢？
我把所有这些部分放在不同的div中，以便可以根据所选选项查看它们。

jquery

来源：https://stackoverflow.com/questions/75906585/how-do-i-stop-my-page-from-lagging-when-all-sections-of-a-div-are-visible

1条答案

按热度按时间

6jjcrrmo1#

你可以做的一件事就是在元素中添加“display：none”。
display：none，隐藏元素并破坏其呈现状态。这意味着取消隐藏元素的代价与呈现具有相同内容的新元素一样高。
然后可以使用“scrollTop（）”和“offset（）.top”方法将其呈现回DOM。
下面是我告诉你的一个例子：

window.onscroll = function () { scrollFunction() };
        function scrollFunction() {
            var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
            for (var i = 0; i < boxes.length; i++) {
                boxesOffset[i] = boxes[i].offsetTop;
                boxesOffsetHeight[i] = boxes[i].offsetHeight;
            }
            boxSize = boxesOffsetHeight[toWitchBox] + nextScrollTop
            console.log(boxSize + " , " + toWitchBox)
            if ((scrollTop > boxSize) && toWitchBox < boxes.length - 1) {
                boxes[toWitchBox + 1].style.display = "block";
                nextScrollTop = scrollTop
                toWitchBox += 1
            }
        }
        var nextScrollTop = 0
        var toWitchBox = 0
        var boxes = document.getElementsByClassName("box");
        var boxesOffsetHeight = []
        var boxesOffset = []

body {
            min-height: 5200px;
        }

        #box1 {
            background-color: red;
            width: 800px;
            height: 600px;
        }

        #box2 {
            background-color: yellow;
            width: 800px;
            height: 800px;
            display: none;
        }

        #box3 {
            background-color: blue;
            width: 800px;
            display: none;
            height: 800px;
        }

        #box4 {
            background-color: green;
            width: 800px;
            display: none;
            height: 800px;
        }

        #box5 {
            background-color: pink;
            width: 800px;
            display: none;
            height: 800px;
        }

<body>

    <div id="box1" class="box">

    </div>
    <div id="box2" class="box">

    </div>
    <div id="box3" class="box">

    </div>
    <div id="box4" class="box">

    </div>

    <div id="box5" class="box">

    </div>
</body>

赞(0）回复(0）举报 2023-04-05

我来回答

jquery 当div的所有部分都可见时，如何阻止页面滞后？

1条答案

相关问题

热门标签

最新问答