个人中心
gpt4 book ai didi

javascript - 明确设置 scrollTop 时 iOS webkit 浏览器上的无限滚动闪烁

转载 作者：行者123 更新时间：2023-11-29 02:48:03 24 4
gpt4 key购买 nike

我有一个奇怪的问题，很难解释。我仍然会继续尝试。发生的事情是我有一个无限滚动逻辑，当用户滚动到页面底部时我会加载更多内容，如果 DOM 元素的数量增加超过一定限制，我会从顶部删除等量的 DOM 元素 block ，保持页面中 DOM 元素的数量不变并控制内存。现在，当我在底部添加新元素并从顶部删除旧元素时，我必须明确设置可滚动元素(父容器)的 scrollTop 位置，以保持用户的滚动位置。我现在正在使用 Jquery 的 scrollTop() 方法调用来设置滚动位置。一旦我通过调用 scrollTop() 更新滚动位置，页面就会闪烁，我可以在 iOS 设备上短暂地看到一个白色补丁。即使使用 native Javacript scrollTop 属性也会发生这种情况。该问题仅在 iOS webkit 浏览器(设备上的 webview 和浏览器以及模拟器)上出现，我在 Android webview 上没有看到同样的问题。即使在桌面浏览器上，它也能正常运行，包括 Safari。

我正在编写的代码是双向无限滚动的，但对于这个问题，我只发布向下滚动的代码。

这是代码片段-

<!doctype html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, user-scalable=no" /> 
        <style type="text/css">
            html, body {
                margin: 0;
                padding: 0;
                height: 100%;
                background: #fff;
            }
            #holder {
                overflow-x: hidden;
                overflow-y: scroll;
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
            }


            ul {
                margin: 0;
                padding: 0;
            }
            ul li {
                list-style: none;
                padding: 20px;
                border-bottom: 1px solid #9a9a9a;
                background: #e5e5e4;
            }
            .androidFix {
              overflow: hidden !important;
              overflow-y: hidden !important;
              overflow-x: hidden !important;
            }
        </style>
    </head>
    <body>
        <div id="holder">
            <div id="container">

            </div>
        </div>

        <!-- Script goes here -->
        <script type="text/javascript" src="jquery-2.0.3.js"></script>
        <script type="text/javascript" src="handlebars.js"></script>

        <!-- Sample data -->
        <script type="text/javascript">
            var data = [{slno: '1', amount: '250', name: 'DAG Account', date: '16/07/2014'},
                        {slno: '2', amount: '250', name: 'DAG Account', date: '16/07/2014'},
                        {slno: '3', amount: '250', name: 'DAG Account', date: '16/07/2014'},
                        {slno: '4', amount: '250', name: 'DAG Account', date: '16/07/2014'},
                        {slno: '5', amount: '250', name: 'DAG Account', date: '16/07/2014'},
                        {slno: '6', amount: '250', name: 'DAG Account', date: '16/07/2014'},
                        {slno: '7', amount: '250', name: 'DAG Account', date: '16/07/2014'},
                        {slno: '8', amount: '250', name: 'DAG Account', date: '16/07/2014'},
                        {slno: '9', amount: '250', name: 'DAG Account', date: '16/07/2014'},
                        {slno: '10', amount: '250', name: 'DAG Account', date: '16/07/2014'}];
        </script>

        <!-- Handlebars template -->
        <script id="template" type="text/x-handlebars-template">
            {{#each data}}
                <li>
                     <div>
                        <span><b>sl no {{slno}}</b></span>
                        <span>{{amount}}</span>
                    </div>
                    <div>
                        <span>{{name}}</span>
                        <span>{{date}}</span>
                    </div>
                </li>
            {{/each}}
        </script>

        <!-- App logic -->
        <script type="text/javascript">

            var source   = $("#template").html();
            var template = Handlebars.compile(source);
            var html = template({data: data});
            //console.log(html);

            var holderRef = $("#holder");
            var holderHeight = $("#holder").height();

            var newChunk = $("<ul class='list-chunk' />");
            newChunk.append(html);

            var containerRef = $("#container");

            containerRef.append(newChunk);  //initial data load

            var chunkHeight = $(".list-chunk").height();


            $("#holder").scroll(function() {

                //test for bottom
                var scrollTopVal = this.scrollTop;

                var containerHeight = containerRef.height();

                //console.log('test', scrollTopVal);

                if(scrollTopVal + holderHeight >= containerHeight) {
                    console.log('bottom');

                    var newChunk = $("<ul class='list-chunk' />");
                    newChunk.append(html);

                    containerRef.append(newChunk);

                    //if($("#container").children().size() > 2) {
                    if(containerRef.children().size() > 2) {
                        var viewTop = $("#holder").scrollTop();

                        var oldChunk = containerRef.children().first();
                        var oldChunkHeight = oldChunk.height();
                        console.log(chunkHeight);
                        oldChunk.remove();

                        setScrollTop(viewTop - chunkHeight);  
                    }

                }


                function setScrollTop(amount) {
                    $("#holder").addClass("androidFix").scrollTop(amount).removeClass("androidFix");   //******* - the problem lies here
                }
            });
        </script>
    </body>
</html>

最佳答案

按照我尝试的顺序给出一些建议/猜测:

您的 androidFix 类也在其他系统上应用。不要应用类，而是仅在需要它的系统上直接更改元素样式 Prop (element.style.overflowX =“hidden”等)。也许可以进行浏览器嗅探。您也可以在同一个调用中直接应用您的 scrollTop，这样您就不必在滚动设置周围打开然后关闭类，并节省多个昂贵的 DOM 操作。

滚动事件触发很多，DOM 操作非常慢，尤其是改变 DOM 树。您可以设置一个标志 (changingDOM = true)，然后直接从对滚动处理程序的后续调用返回，直到您完成并将其设置回 false。

想一想，这就是androidfix的原因吗？设置 scrollTop 递归调用滚动处理程序，除非你 overflow=hidden?在那种情况下，我会首先尝试后者的改变。

关于javascript - 明确设置 scrollTop 时 iOS webkit 浏览器上的无限滚动闪烁，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24864034/

24 4 0
文章推荐： ios - 如何修复此执行但不起作用的代码？
文章推荐： elasticsearch - 如何在 Filebeat/ELK 中为不同的日志定义单独的索引？
文章推荐： mysql - 如何让我的 GROUP BY 获取特定列的最后一行(按日期)的值？
文章推荐： elasticsearch - elastic search 5.1 为什么stored_fields 不返回请求的字段？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com