javascript 从更新面板异步回发后保持滚动位置
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/6583501/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Maintain scroll position after async postback from update panel
提问by Jarek
I'm having some troubles with asp.net and update panel. The problem is, that every time partial postback occurs from update panel, page is scrolled back to top. On most of my pages this is not such a big problem, but on some pages can get quite long. Then, when user is on bottom of page, I show jQuery popup with RadListView
in it, and user can select element in this list. But clicking on this element causes partial postback and page jumps back to the top.
我在使用 asp.net 和更新面板时遇到了一些麻烦。问题是,每次从更新面板发生部分回发时,页面都会滚动回顶部。在我的大多数页面上,这不是什么大问题,但在某些页面上可能会很长。然后,当用户在页面底部时,我会RadListView
在其中显示 jQuery 弹出窗口,用户可以在此列表中选择元素。但是点击这个元素会导致部分回发,页面会跳回到顶部。
I've looked through internet and could not find any solution to my problem. Of course setting MaintainScrollPositionOnPostback
does nothing.
我浏览了互联网,找不到任何解决我问题的方法。当然设置MaintainScrollPositionOnPostback
什么都不做。
Does anyone know anything that could help me deal with this problem?
有谁知道什么可以帮助我解决这个问题?
Cheers, Pako
干杯,帕科
回答by Buzinas
There is a little workaround for this, that I've used in an ERP long time ago. Not sure if it's the best solution, but it works.
对此有一些解决方法,我很久以前就在 ERP 中使用过。不确定这是否是最好的解决方案,但它有效。
I don't know if you use a custom Page class or the default System.Web.UI.Page
one, but, I'll try to explain to you how you do it, and then you find out the best way you can implement it in your environment, alright?
我不知道您使用的是自定义 Page 类还是默认的 Page 类System.Web.UI.Page
,但是,我会尝试向您解释您是如何做到的,然后您会找出在您的环境中实现它的最佳方式,好吗?
You'll create a HiddenField
, for example, with the ID "hfScrollPosition".
HiddenField
例如,您将创建一个ID 为“hfScrollPosition”的 。
Then, you'll make a javascript event: document.onscroll
or something like that, and inside the event you'll update the hidden field to get the current scroll position. For example:
document.getElementById("hfScrollPosition").value = document.documentElement.scrollTop;
然后,您将创建一个 javascript event:document.onscroll
或类似的内容,并在该事件中更新隐藏字段以获取当前滚动位置。例如:
document.getElementById("hfScrollPosition").value = document.documentElement.scrollTop;
Doing that, you'll have an ASP.NET control updating its value dinamically, according to the body scroll position. So, when some control in your page makes a postback, you can put the following javascript code in your Page_Load event:
这样做,您将有一个 ASP.NET 控件根据主体滚动位置动态更新其值。因此,当页面中的某些控件进行回发时,您可以将以下 javascript 代码放入 Page_Load 事件中:
document.documentElement.scrollTop = document.getElementById("hfScrollPosition").value;
document.documentElement.scrollTop = document.getElementById("hfScrollPosition").value;
So, everytime your page gets a postback, the body scroll position will be correctly updated.
因此,每次您的页面收到回发时,正文滚动位置都会正确更新。
EDIT: I've made a fiddle to simulate it: https://jsfiddle.net/j26fpgzo/
编辑:我做了一个小提琴来模拟它:https: //jsfiddle.net/j26fpgzo/
回答by srikanth
Use the ID of some control in the repeater and use JQuery to scroll after postback is completed.
在repeater中使用一些控件的ID,在postback完成后使用JQuery进行滚动。
You can get the ID of some control as per the format they are generating.
您可以根据它们生成的格式获取某些控件的 ID。