Сохранение положения прокрутки div на странице при обратной передаче

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

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

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

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


scroll html asp.net scroll-position postback
person Nikhil    schedule 07.07.2009    source источник

Ответы (5)


arrow_upward
15
arrow_downward

Как упоминал Джефф С., одним из способов справиться с этой ситуацией является использование 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.

person joshb    schedule 08.07.2009

arrow_upward
6
arrow_downward

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

person Ben Griswold    schedule 07.07.2009

arrow_upward
3
arrow_downward 

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 с единственной целью сохранения позиции прокрутки ... :)

person Dbl    schedule 14.03.2013

arrow_upward
1
arrow_downward

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

person Jeff Siver    schedule 07.07.2009

arrow_upward
0
arrow_downward

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

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

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

person Adam Ralph    schedule 07.07.2009
comment
Когда кнопка ссылки нажата, она заполняет элемент управления графиком, присутствующий на странице. Похоже, выполнение этого на стороне клиента кажется лучшим подходом - person Nikhil; 08.07.2009