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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-25 21:11:38  来源:igfitidea点击:

Maintain scroll position after async postback from update panel

javascript.netasp.netajaxupdatepanel

提问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 RadListViewin 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 MaintainScrollPositionOnPostbackdoes 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.Pageone, 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.onscrollor 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。