启用引导程序时 ASP.Net Web 表单应用程序的页面滚动行为

Question

启用 bootstrap css 后，我在 ASP.Net Web 表单应用程序中遇到页面滚动行为问题，下面是解释。

1. 从 Visual Studio 2022 创建了一个新的 Web 窗体项目
2. VS 自动创建包含所需文件夹/文件和包的项目（包括 bootstrap 5.2）
3. 在default.aspx页面中，在

   asp:Button

   内添加了一个

   asp:UpdatePanel

   ，在客户端点击时与JavaScript调用绑定。该按钮的目的是滚动到位于页面底部的

   div

   。

<asp:UpdatePanel ID="upd" runat="server">
<ContentTemplate>
<asp:Button ID="btn" runat="server" Text="Button 1" 
OnClientClick="Scroll()" />
</ContentTemplate>  
</asp:UpdatePanel>


<div id="div1" style="background-color:aquamarine">
Scrolled
</div>

<script>
function Scroll() {
/*location.href = '#div1';*/
<%--document.getElementById("<%=div1.ClientID %>")--%>
document.getElementById("div1").scrollIntoView();
}
</script>

4. 尝试测试功能，发现页面按预期滚动到页面底部（Div1）并立即滚动回页面顶部。

请根据以下观察帮助我。

观察

1. 如果禁用了以下对 bootstrap CSS 的引用，则可以按预期工作，没有问题。

<webopt:bundlereference runat="server" path="~/Content/css" />

2. 访问以下链接地址查看视频和完整源代码

https://terabox.com/s/1WlTza-lRaSITeTT2vhA8w

https://1drv.ms/f/c/4f306b866deac618/EhNv9FLPjIZHqYCkp_1P48oBaVpwJOQ4aimjW2MP2xf9hw?e=vqvJ08

Answer 1

好的，所以对于您发布的标记，大部分问题是 div 位于您的更新面板之外（因此，这样的代码没有多大意义）。

但是，使用此标记：

        <asp:UpdatePanel ID="upd" runat="server">
            <ContentTemplate>
                <asp:Button ID="btn" runat="server" Text="Button 1"
                    OnClientClick="Scroll();return false" />
            </ContentTemplate>
        </asp:UpdatePanel>


        <div id="div1" style="background-color: aquamarine">
            Scrolled
            one<br />
            two<br />
            three<br />
            four<br />
            five<br />
            test<br />
            test<br />
            test<br />
            test<br />
            test<br />
            test<br />
            test<br />
        </div>

        <script>
            function Scroll() {
                document.getElementById("div1").scrollIntoView();
            }
        </script>

那么效果是这样的：

因此，我在按钮单击中添加了“return false”，上面的内容似乎确实根据需要滚动了页面。

因此，发布视频等链接不仅浪费时间，而且您实际上需要做的就是发布一些能够重现您的错误的标记，而我们无法使用给定的标记重现您的错误。

创建一个测试页面，SIMPLE 提供重现错误的标记和示例，然后这里的每个人都可以尝试发布的标记。我们观看视频并在某些链接中下载一些代码的想法是非常愚蠢的。我们不会再去你家清洗你的脏衣服，然后再去把你的衣服叠起来并把它收起来。

因此，我采用了您发布的标记，调整了浏览器的大小（以强制滚动），并且发布的代码看起来工作得很好。