![](/img/trans.png)
[英]ASP.NET Maintain scroll position after postback in div inside data list and user control
[英]Maintain scroller position on Div after page postback (ASP.NET)
我有一个这样的div:
<div style="overflow-y: scroll; height: 260px">
我包含几百条记录,并允许我选择一个项目来填充它下面的 formview 控件。
问题是当页面回发时,滚动条位置会回到 div 的顶部。 我想尝试并保持其位置,以便所选记录仍然可见。
有任何想法吗?
放置类似的东西:
<asp:HiddenField id="hdnScrollPos" runat="server"/> in your aspx.
然后,一些javascript像:
var hdnScroll = document.getElementById(<%=hdnScrollPos.ClientID%>);
var bigDiv = document.getElementById('bigDiv');
bigDiv.onscroll = function() {
hdnScroll.value = bigDiv.scrollTop;
}
window.onload = function () {
bigDiv.scrollTop = hdnScroll.value;
}
这是使用 JQuery 的 FlySwat 解决方案的一种更精致的方式,它对我有用:
var $ScrollPosition = $('#hfScrollPosition');
var $ScrollingDiv = $('#pnlGroupDataContent');
if ($ScrollPosition.length && $ScrollingDiv.length) {
// Store scrolling value
$ScrollingDiv.scroll(function () {
$ScrollPosition.val($ScrollingDiv.scrollTop());
});
// Set scrolling
$ScrollingDiv.scrollTop($ScrollPosition.val());
}
免责声明 - 不是我的代码,但我以前见过这个:
window.onload = function(){
var strCook = document.cookie;
if(strCook.indexOf("!~")!=0){
var intS = strCook.indexOf("!~");
var intE = strCook.indexOf("~!");
var strPos = strCook.substring(intS+2,intE);
document.getElementById("divTest").scrollTop = strPos;
document.getElementById("divTest").scrollTop = strPos;
}
}
function SetDivPosition(){
var intY = document.getElementById("divTest").scrollTop;
document.cookie = "yPos=!~" + intY + "~!";
}
这个想法是将滚动条的位置存储在 cookie 中。 另一个(更好?)选项是将其存储在隐藏字段(或多个字段)中。 希望这能让你继续...
ASP.NET 内置了此功能,您只需在页面指令中包含 MaintainScrollPositionOnPostback。
<%@ Page Language="C#" MaintainScrollPositionOnPostback="true" %>
用document.getElementById("divTest")
thebody
如果担心 onscroll 事件在 opera/ff 中不起作用,可以尝试更改
thebody.onscroll=SaveScrollLocation;
至
setInterval('SaveScrollLocation()", 500);
尝试了以上所有方法,但在 chrome v39 中没有一个能令人满意地工作,但是这个页面上使用的方法非常有效:
<asp:HiddenField ID="hfScroll" runat="server" ClientIDMode="Static" />
<script>
$(document).ready(function () {
ScrollMaintain();
$(window).scroll(function () {
$('#hfScroll').val($(window).scrollTop());
});
function ScrollMaintain() {
var scroll = $('#hfScroll').val();
scroll = (scroll == '' ? '0' : scroll);
$(window).scrollTop(scroll);
}
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.