1

我有一个 asp 面板，它使用 ajax 作为模态弹出窗口打开。此面板中有一些可以回发的用户控件，例如允许自定义编辑和添加的 gridview。

然而，由于面板的大小，我不得不引入滚动条，以便用户可以滚动 asp 面板并编辑相应的网格视图。在回发时，尽管面板内的滚动条被重复放置在顶部，而不是保持滚动位置。

我的问题是；有没有办法在这个模态弹出扩展面板中保持滚动位置？

4

3 回答 3

2

使用的代码（供参考）是：

var iST;
$(document).ready(function() {
getScrollPosition();
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(getScrollPosition);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(setScrollPosition);
});

function pageLoad() {
    var popup = $find('<%=MODALPOPUPNAME.ClientID%>');
    popup.add_shown(setScrollPosition);
}

function getScrollPosition() {
    iST = $("#<%=PANELNAME.ClientID %>").scrollTop();
}
function setScrollPosition() {
    $("#<%=PANELNAME.ClientID %>").scrollTop(iST + 20);
}

谢谢。

于 2012-08-30T14:33:21.767 回答
0

花了几个小时后，我能够做到这一点。假设我们有一个名为 myDiv 的 div，它位于一个名为 pnlPopup 的弹出面板中。每当 myDiv 上有一个 scoll 时，我们需要 javascript 来标记滚动位置。我们在一个名为 hfScrollP 的隐藏元素中标记这个滚动位置。

<script type="text/javascript">
    function markScrollPosition() {
        var div = document.getElementById("myDiv").scrollTop;
        document.getElementById('<%=hfScrollP.ClientID %>').value = div;
    }
</script>

<asp:HiddenField ID = "hfScrollP" runat = "server" />
<asp:Panel ID="pnlPopup" runat="server"  Width="750px" style="display:none;">

    <div id="myDiv" style="height: 350px; width: 700px;overflow: auto;" 
          onscroll="markScrollPosition();">

    </div>

</asp:Panel>

然后我们有一个按钮，它会在点击时打开弹出窗口和我们的模态弹出扩展器。

<asp:Button ID="btnShowModalPopup" runat="server" Text="Show" />
<ajaxToolkit:ModalPopupExtender ID="mpePopup" runat="server" 
   TargetControlID="btnShowModalPopup" 
   PopupControlID="pnlPopup" DropShadow="True" BackgroundCssClass="modalBackground"  
   Enabled ="true">
</ajaxToolkit:ModalPopupExtender>

我们需要这个 javascript 以便在每次我们有回发并显示弹出窗口时设置弹出窗口上的滚动位置。

<script type="text/javascript" language="javascript">
                function pageLoad() {
                    var modal = $find('<%=mpePopup.ClientID %>');
                    $find('<%=mpePopup.ClientID %>').add_shown(
                        function () {                       
                     $('#myDiv').scrollTop(document.getElementById('<%=hfScrollP.ClientID %>').value);
                    }
                       );
                }
 </script>

在你的代码后面。

  Private Sub btnShowModalPopup_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnShowModalPopup.Click
            //Do your necessary processing
            mpePopup.show();
        End Sub

而已。当弹出窗口显示时，它将滚动回最后标记的向下滚动位置。希望能帮助到你 ：）

于 2019-01-31T03:34:49.680 回答
-1

您可以更改特定 Div 的 javascript 代码。

<script type="text/javascript">
    function pageLoad() {
        $('#DataDiv').scrollTop(document.getElementById('<%=hfScrollT.ClientID %>').value).scrollLeft(document.getElementById('<%=hfScrollL.ClientID %>').value);
    }
</script>

希望有所帮助！

于 2019-07-02T20:50:35.313 回答