Сохранять положение прокрутки div на странице при обратной передаче
-
11-09-2019 - |
Вопрос
У меня есть div на странице aspx, для которого для переполнения установлено значение auto.Содержимое div создается динамически и состоит из списка кнопок ссылок.
<div id="div1" style="overflow: auto; height: 100%;">
.....
</div>
Когда я прокручиваю элемент div и нажимаю любую из кнопок ссылок, при перезагрузке страницы теряется положение прокрутки внутри элемента div и происходит переход к началу элемента div.Есть ли способ предотвратить это?
Обратите внимание, что это относится к div внутри страницы. Page.MaintainScrollPositionOnPostBack()
не работает.
Решение
Как упомянул Джефф С., один из способов справиться с этой ситуацией — использовать 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.
Другие советы
Самый простой способ — обернуть элемент управления в UpdatePanel.
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>
Поскольку некоторые люди не хотят использовать панель обновления исключительно для сохранения позиции прокрутки...:)
Один из способов сделать это — захватить в событии onscroll элемента div значения из свойств ScrollLeft и ScrollTop.Сохраните эти значения в скрытых текстовых полях.При ответном сообщении используйте значения из текстовых полей для сброса свойств.
Что происходит при нажатии кнопок ссылок?Какая обработка происходит во время обратной передачи?
В зависимости от ответов на эти вопросы вы, возможно, захотите полностью избавиться от обратной передачи и выполнить необходимые операции исключительно на стороне клиента.
(В настоящее время я выполняю такое преобразование для клиента.)