在回发时保持页面内 div 的滚动位置 [英] Maintain scroll position of a div within a page on postback

查看：24 发布时间：2021/12/29 11:11:09 asp.net html scroll postback scroll-position

本文介绍了在回发时保持页面内 div 的滚动位置的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在 aspx 页面中有一个 div，溢出设置为自动.div 的内容是动态创建的，由链接按钮列表组成.

.....

当我在 div 中向下滚动并单击任何链接按钮时，页面重新加载会丢失 div 内的滚动位置并将我带到 div 的顶部.有什么办法可以防止吗?

请注意，这是针对页面内的 div.Page.MaintainScrollPositionOnPostBack() 不起作用.

解决方案

正如 Jeff S 提到的，处理这种情况的一种方法是使用 javascript 来跟踪 div 的滚动位置，并且每次页面加载时将滚动位置重置为其之前的值.

这是一些示例代码:

<body onload="javascript:document.getElementById('div1').scrollTop = document.getElementById('scroll').value;"><form id="form1" runat="server"><input type="hidden" id="scroll" runat="server"/><div id="div1" style="overflow: auto; height: 100px;"onscroll="javascript:document.getElementById('scroll').value = this.scrollTop">.....<br/>.....<br/>.....<br/>.....<br/>.....<br/>.....<br/>.....<br/>.....<br/>.....<br/>.....<br/>.....<br/>.....<br/><asp:LinkButton ID="LinkButton1" runat="server" Text="test2"></asp:LinkButton>

<asp:LinkButton ID="LinkButton2" runat="server" Text="test1"></asp:LinkButton></表单>

在实践中，我不会将 javascript 直接放在元素中，而只是一个例子.您也可以将滚动位置存储在 cookie 中.

I have a div within an aspx page with overflow set to auto. The contents of the div are dynamically created and consists of a list of link buttons.

<div id="div1" style="overflow: auto; height: 100%;">
.....
</div>

When I scoll down in the div and click on any of the link buttons, the page reload loses the scroll position inside the div and takes me to the top of the div. Is there any way to prevent that?

Note that this is for a div inside the page. Page.MaintainScrollPositionOnPostBack() does not work.

解决方案

As Jeff S mentioned one way to handle this situation is using javascript to track the scroll position of the div and each time the page loads reset the scroll position to its previous value.

Here's some sample code:

<html>
<body onload="javascript:document.getElementById('div1').scrollTop = document.getElementById('scroll').value;">
    <form id="form1" runat="server">
    <input type="hidden" id="scroll" runat="server" />
    <div id="div1" style="overflow: auto; height: 100px;" onscroll="javascript:document.getElementById('scroll').value = this.scrollTop">
        ...........<br />
        ...........<br />
        ...........<br />
        ...........<br />
        ...........<br />
        ...........<br />
        ...........<br />
        ...........<br />
        ...........<br />
        ...........<br />
        ...........<br />
        ...........<br />
        <asp:LinkButton ID="LinkButton1" runat="server" Text="test2"></asp:LinkButton>
    </div>
    <asp:LinkButton ID="LinkButton2" runat="server" Text="test1"></asp:LinkButton>
    </form>
</body>
</html>

In practice I wouldn't put the javascript directly in the elements but its just an example. You could also store the scroll position in a cookie instead.

这篇关于在回发时保持页面内 div 的滚动位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

在回发时保持页面内 div 的滚动位置 [英] Maintain scroll position of a div within a page on postback

问题描述

相关文章

C#/.NET最新文章

热门教程

热门工具

登录关闭

在回发时保持页面内 div 的滚动位置 [英] Maintain scroll position of a div within a page on postback

问题描述

相关文章

C#/.NET最新文章

热门教程

热门工具

登录 关闭

登录关闭