时间戳

首页 > 解决方案 > jQuery $(window).scrollTop(value) 不适用于 Jinja2 渲染的 Bootstrap 4 网格，其中填充了图像

jquery - jQuery $(window).scrollTop(value) 不适用于 Jinja2 渲染的 Bootstrap 4 网格，其中填充了图像

问题描述

我无法让 jQuery$(window).scrollTop(value)代码与 Boostrapped Python-Flask-Jinja Web 应用程序中的特定页面一起使用。jQuery 代码在 Web 应用程序的另外两个页面上运行良好。我认为这与使用 Jinja 渲染此页面有关，但它也可能是 Bootstrap 的事情，我不确定。

如前所述，jQuery$(window).scrollTop(value)正在同一个 Web 应用程序中的其他页面上工作。此外，当我在故障页面的 Bootstrap 网格上方的<br>段落内添加一些中断时，scrollTop 函数也开始在这里工作。<p></p>至少到 Bootstrap 研究开始的地方。似乎引导网格没有增加窗口高度。
删除load_hide类没有帮助。
删除用于在单击事件上设置窗口滚动位置的代码以及对 scrollTop 值进行硬编码无济于事。
删除标签container-fluid上的main没有帮助。

不工作页面

{% extends "layout.html" %}

{% block title %}
    Sculptures
{% endblock %}

{% block main %}

<div class="load_hide">
    <div class="row no-gutters scroll_fix ">
        {% for row in entries %}

        <div class="col-sm-4 px-1 scroll_fix ">
            <a href="/carousel?Id_prod={{ row["Path"] }}">
                <div class="img_container scroll_fix ">
                    <img src="static/images/{{ row["Path"] }}/01.jpg" class="img-fluid" alt="{{ row["Name"] }}" id="{{ row["Id_prod"] }}">
                </div>
            </a>

            <div class="d-flex flex-column mb-2">
                <div class="p-0 flex_child">{{ row["Name"] }}</div>
                <div class="p-0 flex_child">{{ row["Material"] }}</div>
                <div class="p-0 flex_child">{{ row["Dimensions"] }}</div>
                <div class="p-0 flex_child">&euro;{{ row["Price"] }}</div>
            </div>
        </div>



        {% endfor %}
    </div>
    <p>...</p>
</div>

<script>
    $(document).ready(function () {
        // Prevent page shaking during page load caused by the scrollTop function
        $('.load_hide').show();
        $(window).scrollTop(localStorage.getItem('scrollPos_scu'));

        // Set window scroll position
        $(document).on('click', 'img', function () {
            var scrollPos = $(window).scrollTop();
            localStorage.setItem("scrollPos_scu", scrollPos);
        });
    });

</script>

{% endblock %}

工作页面

{% extends "layout.html" %}

{% block title %}
    Inventory
{% endblock %}

{% block main %}

<h5 class="p-3">Inventory</h5>
<div class="row no-gutters load_hide">
    <div class="table-responsive-sm p-2">

        <table class="table">
            <thead>
                <tr>
                    <th class="w-2 td_pad"></th>
                    <th class="w-2 td_pad"></th>
                    <th class="w-5">No</th>
                    <th class="w-5">Show</th>
                    <th class="w-10">Photo</th>
                    <th class="w-15">Name</th>
                    <th class="w-25">Material</th>
                    <th class="w-10">Dimensions</th>
                    <th class="w-10">Price [&#8364;]</th>
                    <th class="w-5">Year</th>
                    <th class="w-5 p-1" colspan="2"><span class="float-left"><a href="/add_item" class="btn btn-primary btn_create">Create new</a></span></th>
                </tr>
            </thead>

            <tbody>

                {% for row in entries %}
                <tr>
                    <td class="td_pad">
                        <a href="/move_up?Id_prod={{ row["Id_prod"] }}" class="btn btn-primary btn-sm btn_priority">&#8593;</a>
                        <a href="/move_down?Id_prod={{ row["Id_prod"] }}" class="btn btn-primary btn-sm btn_priority">&#8595;</a>
                    </td>
                    <td class="td_pad">
                        <a href="/move_top?Id_prod={{ row["Id_prod"] }}" class="btn btn-primary btn-sm btn_priority">&#8648;</a>
                        <a href="/move_bot?Id_prod={{ row["Id_prod"] }}" class="btn btn-primary btn-sm btn_priority">&#8650;</a>
                    </td>

                    <td style="word-break: break-all">{{ row["Priority"] }}</td>

                    {% if row["Show"] == 1 %}
                    <td class="td_checkbox_pad">
                        <div class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input " id="{{ row["Id_prod"] }}" checked>
                            <label class="custom-control-label" for="{{ row["Id_prod"] }}"></label> <!--A label is required with for="" referencing to the id="" value-->
                        </div>
                    </td>
                    {% else %}
                    <td class="td_checkbox_pad">
                        <div class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input" id="{{ row["Id_prod"] }}">
                            <label class="custom-control-label" for="{{ row["Id_prod"] }}"></label> <!--A label is required with for="" referencing to the id="" value-->
                        </div>
                    </td>
                    {% endif %}

                    <td><img src="static/images/{{ row["Path"] }}/00.jpg" class="img-fluid"></td>
                    <td style="word-break: break-all">{{ row["Name"] }}</td>
                    <td style="word-break: break-all">{{ row["Material"] }}</td>
                    <td style="word-break: break-all">{{ row["Dimensions"] }}</td>
                    <td style="word-break: break-all">{{ row["Price"] }}</td>
                    <td style="word-break: break-all">{{ row["Year"] }}</td>

                    <td class="td_pad"> <a href="/edit_item?Id_prod={{ row["Id_prod"] }}" class="btn btn-primary btn-sm btn_edit_delete ">Edit</a></td>
                    <td class="td_pad"> <a href="/delete?Id_prod={{ row["Id_prod"] }}" class="btn btn-danger btn-sm btn_edit_delete confirm">Detele</a></td>
                </tr>

                {% endfor %}
            </tbody>
        </table>

    </div>

</div>

<script>
    $(document).ready(function () {
        // Prevent page shaking during page load caused by the scrollTop function
        $('.load_hide').show();
        $(window).scrollTop(localStorage.getItem('scrollPos_inv'));

        // Set window scroll position
        $("a").click(function () {
            var scrollPos = $(window).scrollTop();
            localStorage.setItem("scrollPos_inv", scrollPos);
        });
    });
</script>

{% endblock %}


布局页面

<!DOCTYPE html>

<html lang="en">

<head>

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> <!--MOD-->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">

    <link href="/static/favicon.ico" rel="icon">

    <link href="/static/styles.css" rel="stylesheet">

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

    <title><!-- ..... -->: {% block title %}{% endblock %}</title>

</head>

<body>
    <nav>
       <!-- ............ -->
    </nav>


    {% if get_flashed_messages() %}
    <header>
        <div class="alert alert-primary border text-center" role="alert">
            {{ get_flashed_messages() | join(" ") }}
        </div>
    </header>
    {% endif %}


    <main class="container-fluid py-1 px-0">
        <!--MOD  container-fluid -->
        {% block main %}{% endblock %}
    </main>


    <footer class="page_footer ">
        <!-- ........ -->
    </footer>

</body>

</html>

我不明白是什么导致了两个页面之间的行为差​​异。
有人可以告诉我问题是什么吗？

编辑：
我删除了完全不必要的 Jinja 代码，该代码从不工作的页面中每 3 个图像创建一个新的网格行（行的溢出由 Bootstrap 自动处理）。但这仍然没有解决问题。

        <!-- if last column in row -->
        {% if loop.index is divisibleby 3 %}
    </div><div class="row no-gutters scroll_fix ">
        {% endif %}</strong>

编辑：
堆栈上的这个线程似乎接近我的问题。根据这个线程，问题与引导网格的浮动行为有关。不幸的是，我无法解决我的特定问题。
scrollTop 不适用于 Bootstrap 网格

标签： jquerypython-3.xflaskbootstrap-4jinja2

解决方案

经过一天的搜索，我设法解决了问题。

该$(window).scrollTop(value)功能在一个页面上运行而不在另一个页面上运行的原因是由于页面内容（表格与填充图像的引导网格）的差异以及$(window).scrollTop(value)触发的那一刻造成的。

对于这两个页面，$(window).scrollTop(value)在 $(document).ready(function (){});. 不幸的是，$(document).ready(function (){});唯一可以确保加载所有 HTML 内容但不加载图像。不工作的页面几乎完全由图像和一点点 HTML 代码组成。因此，在文档就绪事件中，所有 HTML 代码都适合屏幕，并且没有可滚动的窗口高度。

不工作页面的解决方案是，在$(window).scrollTop(value)加载所有图像后触发该功能。为确保加载所有图像，$(document).ready(function (){}); 必须将其替换为$(window).on('load', function () {});，请参见以下解决方案：

<script>

$(window).on('load', function () {
    // Prevent page shaking during page load caused by the scrollTop function
    $('.load_hide').show();
    $(window).scrollTop(localStorage.getItem('scrollPos_scu'));

    // Set window scroll position
    $(document).on('click', 'img', function () {
        var scrollPos = $(window).scrollTop();
        localStorage.setItem("scrollPos_scu", scrollPos);
    });
});
</script>

请注意，此解决方案仅适用于 jQuery 1.8 及更高版本，根据以下线程： Why $(window).load() is not working in jQuery?

我正在使用 jQuery 3.3.1，我浪费了很多时间试图解决问题$(window).load(function () {});，这仅对 jQuery 1.8 之前的 jQuery 版本有效。

尽管我很高兴找到了解决方案，但我仍然担心加载屏幕出现空白，以防要渲染的图像数量增加。

推荐阅读