【发布时间】：2026-01-11 14:15:01
【问题描述】：
我无法让 jQuery $(window).scrollTop(value) 代码与 Boostrapped Python-Flask-Jinja Web 应用程序中的特定页面一起使用。
jQuery 代码在 Web 应用程序的另外两个页面上运行良好。
我认为这与使用 Jinja 渲染此页面有关，但它也可能是 Bootstrap 的事情，我不确定。
如前所述，jQuery $(window).scrollTop(value) 正在同一个 Web 应用程序中的其他页面上工作。
此外，当我在故障页面的 Bootstrap 网格上方的段落 <p></p> 中添加几个中断 <br> 时，scrollTop 函数也开始在这里工作。至少到 Bootstrap 研究开始的地方。
似乎引导网格没有增加窗口高度。
删除 load_hide 类没有帮助。
删除用于在单击事件上设置窗口滚动位置的代码以及对 scrollTop 值进行硬编码无济于事。
删除 main 标签上的 container-fluid 没有帮助。
页面无效
{% 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">€{{ 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 [€]</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">↑</a>
<a href="/move_down?Id_prod={{ row["Id_prod"] }}" class="btn btn-primary btn-sm btn_priority">↓</a>
</td>
<td class="td_pad">
<a href="/move_top?Id_prod={{ row["Id_prod"] }}" class="btn btn-primary btn-sm btn_priority">⇈</a>
<a href="/move_bot?Id_prod={{ row["Id_prod"] }}" class="btn btn-primary btn-sm btn_priority">⇊</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>
编辑：
Stack 上的这个线程似乎接近我的问题。根据这个线程，问题与引导网格的 浮动 行为有关。不幸的是，我无法解决我的特定问题。
scrollTop not working with Bootstrap grid
【问题讨论】：
标签： jquery python-3.x flask bootstrap-4 jinja2