在ASP.NET中的div中维护asp：table滚动位置

Question

I have an asp:Table inside a div. How do I maintain its scroll position on every postback?

<div style="overflow: visible">
    <asp:Table ID="ReportBody" runat="server" EnableViewState="False" CellSpacing="0">
    </asp:Table>
</div>

I tried MaintainScrollPositionOnPostback=true in the Page directive to no avail. I also tried Page.MaintainScrollPositionOnPostback = true in PageLoad and didn't work. I also tried a bunch of JS scripts from Stackoverflow and nothing worked.

Thanks.

Answer 1

It's a little difficult to answer specifically, as I don't get much sense of a page structure from what's provided, but as a broad guess, I'd say that I would combine jQuery and ASP.NET for this -- using jQuery to track the scroll, write it to a .NET input hidden field, and then reapply it whenever the page reloads.

You may need to adjust this to fit the needs of your actual document, but I'm thinking of something along these lines. (Note: if you want a scroll within the page , rather than within a specific div, refer to the notes at the end of this answer.)

Firstly, for the main div, I'm assuming you have something like:

<div id="container" style="overflow-y:auto;">

...so that the content of the div can scroll vertically. Working with that assumption, the next addition would be a hidden field within the page:

<asp:HiddenField ID="tScroll" runat="server" value="0" />

The default of 0 is there for when the page first loads. Lastly, you use jQuery to both track the scroll position, and to reapply the tracked scroll position whenever the page is reloaded and the document ready step is triggered:

$(document).ready(function() {
    $("#container").scrollTop($("#tScroll").val()); // this sets the scroll position
    $("#container").scroll(function() {
        $("#tScroll").val($(this).scrollTop());
    });
});

However, if the div and table are visible when the page loads, you'll get a split-second jerk as the div appears initially in its normal position, and then jumps to the scrolled position. Instead, you can perform a smooth scroll back by using the jQuery animate function, and replace that line with:

$("#container").animate({ scrollTop: $("#tScroll").val() + 'px' }, 500);

...adjusting the 500 to be larger or smaller as you wish. This way, the div will scroll itself back to the position you need.

I can't tell if this is an exact fit for what you need, but hopefully it should at least point you in the right direction.

Addendum to this: if you're looking to maintain a page scroll, rather than a scroll within a specific div, the logic is identical, but you'd be tracking and referencing a couple of different values, essentially as follows:

$('html,body').animate({ scrollTop: $("#tScroll").val() }, 500);
$(window).scroll(function(e) { 
    ...

...with the rest of the script kept in the same line. You can choose whether to use the animate or the direct scrollTop assignment in either case.