我正在使用ASP.NET VB,并且我已经实现了一个模拟默认底部滚动条的顶部滚动条。 由于某种原因...当我调整窗口大小时,如果大小低于90%,顶部滚动条就会停止工作...只要大小恢复到90%或以上,它就会继续工作... 我找不到解决方案或任何帮助...
我尝试将宽度限制为仍然工作的90%的宽度,但它没有起作用...似乎小于90%的调整大小操作是导致问题的唯一原因...而不是宽度本身... 不过,我可能是错的...
这是代码:
<script type="text/javascript" src="/Scripts/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () {
TopScrollBar();
});
$(document).ready(function () {
TopScrollBar();
});
$(window).resize(function () {
TopScrollBar();
});
function TopScrollBar() {
// 将divWidth的宽度设置为GridView1的宽度
$('#divWidth').width($('#GridView1').width());
// 将divScroll的滚动与GridContainer同步
$("#divScroll").on('scroll', function () {
$("#GridContainer").scrollLeft($(this).scrollLeft());
});
// 将GridContainer的滚动与divScroll同步
$("#GridContainer").on('scroll', function () {
$("#divScroll").scrollLeft($(this).scrollLeft());
});
}
</script>
<div id="divScroll" style="overflow-x: scroll; overflow-y: hidden; height: 20px;"
<div id="divWidth"></div>
</div>
<div id="GridContainer" style="overflow-x: scroll;">
<asp:GridView ID="GridView1" runat="server" CssClass="gridviewStyle" ClientIDMode="Static">
</asp:GridView>
</div>
CSS:
.gridviewStyle {
width: 100%;
border-collapse: collapse;
font-family: Arial, sans-serif;
} Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
我不确定这是否是你唯一的问题,但是通常在使用on之前需要使用off。
你正在添加新的事件监听器,但没有移除旧的。
试试这个:
function TopScrollBar() { // 设置divWidth的宽度与GridView1相同 $('#divWidth').width($('#GridView1').width()); // 将divScroll的滚动与GridContainer同步 $("#divScroll").off('scroll').on('scroll', function () { $("#GridContainer").scrollLeft($(this).scrollLeft()); }); // 将GridContainer的滚动与divScroll同步 $("#GridContainer").off('scroll').on('scroll', function () { $("#divScroll").scrollLeft($(this).scrollLeft()); }); }