Поддерживать положение прокрутки div в пределах страницы на обратной стороне

Question

Поддерживать положение прокрутки div в пределах страницы на обратной стороне

У меня есть div внутри страницы aspx с переполнением, установленным в auto. Содержимое div создается динамически и состоит из списка кнопок ссылок.

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

.....

</div>

Когда я спускаюсь в div и нажимаю на любую из кнопок ссылки, перезагрузка страницы теряет положение прокрутки внутри div и переносит меня в верхнюю часть div. Есть ли способ предотвратить это?

Обратите внимание, что это для div внутри страницы. Page.MaintainScrollPositionOnPostBack() не работает.

562 5

html asp.net scroll postback scroll-position

5 ответов:

Comments

Ничего не найдено.

joshb · Accepted Answer · 2009-07-09 22:09:13

Как упоминал Джефф С., Один из способов справиться с этой ситуацией-использовать javascript для отслеживания положения прокрутки div и каждый раз, когда страница загружается, сбрасывать положение прокрутки до его предыдущего значения.

Вот пример кода:
<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>
На практике я бы не ставил javascript непосредственно в элементах, но это просто пример. Вместо этого вы можете сохранить положение прокрутки в файле cookie.

Ben Griswold · Accepted Answer · 2009-07-08 00:04:02

Самый простой способ-обернуть элемент управления в Панель обновления.

Dbl · Accepted Answer · 2013-03-15 11:25:31

using System;
using System.ComponentModel;
using System.Web.UI;
using System.Web.UI.WebControls;

[ParseChildren(true, "Content")]
public class ScrollSaverPanel: WebControl
{
    [TemplateInstance(TemplateInstance.Single)]
    [PersistenceMode(PersistenceMode.InnerProperty)]
    [DesignerSerializationVisibility(DesignerSerializationVisibility.Content)]
    public ITemplate Content { get; set; }

    private HiddenField HiddenField { get; set; }

    protected override HtmlTextWriterTag TagKey
    {
        get
        {
            return HtmlTextWriterTag.Div;
        }
    }

    protected override void OnInit(EventArgs e)
    {
        HiddenField = new HiddenField();

        var metaContainer = new WebControl(HtmlTextWriterTag.Div);
        metaContainer.Controls.Add(HiddenField);
        metaContainer.Style.Add(HtmlTextWriterStyle.Display, "none");

        Controls.Add(metaContainer);

        var contentContainer = new WebControl(HtmlTextWriterTag.Div);
        Controls.Add(contentContainer);

        Content.InstantiateIn(contentContainer);

        this.Style.Add(HtmlTextWriterStyle.Overflow, "auto");
        this.Attributes.Add("onscroll", string.Format("javascript:document.getElementById('{0}').value = this.scrollTop;", HiddenField.ClientID));

        base.OnInit(e);
    }

    protected override void OnPreRender(EventArgs e)
    {
        ScriptManager.RegisterStartupScript(this, this.GetType(), "setscroll", string.Format("javascript:document.getElementById('{0}').scrollTop = '{1}';", this.ClientID, HiddenField.Value), true);
        base.OnPreRender(e);
    }
}

Использование:

<general:ScrollSaverPanel runat="server">
    <Content>
        <stwrw:Group runat="server" ID="rootGroup"/>
    </Content>
</general:ScrollSaverPanel>

Так как некоторые люди не хотят использовать Updatepanel с единственной целью сохранения позиции прокрутки... :)

Jeff Siver · Accepted Answer · 2009-07-08 00:15:00

Один из способов сделать это-захватить в событии onscroll div значения из свойств scrollLeft и scrollTop. Сохраните эти значения в скрытом текстовом поле. На обратной стороне используйте значения из текстовых полей для сброса свойств.

Adam Ralph · Accepted Answer · 2009-07-08 00:07:25

Что происходит при нажатии кнопок связи? Какая обработка происходит во время обратной передачи?

В зависимости от ответов на эти вопросы, вы можете изучить возможность полного избавления от обратной связи и выполнения необходимых операций исключительно на стороне клиента.

(в настоящее время я выполняю этот вид преобразования для клиента.)