asp.net - Maintain scroll position of a div within a page on postback

Question

Welcome To Ask or Share your Answers For Others

asp.net - Maintain scroll position of a div within a page on postback

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

asp.net - Maintain scroll position of a div within a page on postback

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.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T18:58:56+0000

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.

Categories

asp.net - Maintain scroll position of a div within a page on postback

asp.net - Maintain scroll position of a div within a page on postback

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags