我正在使用以下代码在 ASP.NET 网络应用程序中创建一个滚动的 div。
<div id="my_scroll_form" style="overflow:auto; height:500px">
//My large form goes here (contains radio buttons and check boxes)
</div>
但是每当我向下滚动并单击任何单选按钮或复选框时,滚动条会转到顶部,我必须再次向下滚动。每次我单击表单上的某些内容时都会发生这种情况。有没有一种方法可以阻止它,并且在我与表单交互时不将滚动条移动到默认顶部位置?
<div id="request_scroll" style="overflow:auto; height:100px">
<input type="radio" name="select" value="option1" /> Option 1 <br />
<input type="radio" name="select" value="option2" /> Option 2 <br />
<input type="radio" name="select" value="option3" /> Option 3 <br />
<input type="radio" name="select" value="option4" /> Option 4 <br />
<input type="radio" name="select" value="option5" /> Option 5 <br />
<input type="radio" name="select" value="option6" /> Option 6 <br />
<input type="radio" name="select" value="option7" /> Option 7 <br />
<input type="radio" name="select" value="option8" /> Option 8 <br />
<input type="radio" name="select" value="option9" /> Option 9 <br />
<input type="radio" name="select" value="option10" /> Option 10 <br />
</div>
以上是 HTML 中的一个工作片段,但如果我单击单选按钮,滚动将不会重置。在我的例子中,我使用带有 <asp:RadioButtonList>
的 ASP.NET Web 表单我的后端代码是处理 OnSelectedIndexChanged
的 C#此单选按钮列表的事件。当我在 ASP.NET 表单中单击单选按钮时,滚动将重置到顶部位置。
最佳答案
使用此代码。
Javascript
代码:
<script type="text/javascript">
window.onload = function () {
var div = document.getElementById("request_scroll");
var div_position = document.getElementById("div_position");
var position = parseInt('<%=Request.Form["div_position"] %>');
if (isNaN(position)) {
position = 0;
}
div.scrollTop = position;
div.onscroll = function () {
div_position.value = div.scrollTop;
};
};
</script>
Asp.Net
代码:
<div id="my_scroll_form" style="overflow:auto; height:500px;text-align:center">
<asp:Label ID="Label1" runat="server" Text=""></asp:Label>
<div id="request_scroll" style="overflow-y:scroll; height:100px;">
<asp:RadioButton ID="RadioButton1" runat="server" GroupName="lbl" Text="radio1" AutoPostBack="true" OnCheckedChanged="RadioButton1_CheckedChanged" /><br />
<asp:RadioButton ID="RadioButton2" runat="server" GroupName="lbl" Text="radio2" AutoPostBack="true" OnCheckedChanged="RadioButton2_CheckedChanged"/><br />
<asp:RadioButton ID="RadioButton8" runat="server" GroupName="lbl" Text="radio3" AutoPostBack="true" OnCheckedChanged="RadioButton8_CheckedChanged"/><br />
<asp:RadioButton ID="RadioButton7" runat="server" GroupName="lbl" Text="radio4" AutoPostBack="true" OnCheckedChanged="RadioButton7_CheckedChanged"/><br />
<asp:RadioButton ID="RadioButton6" runat="server" GroupName="lbl" Text="radio5" AutoPostBack="true" OnCheckedChanged="RadioButton6_CheckedChanged"/><br />
<asp:RadioButton ID="RadioButton5" runat="server" GroupName="lbl" Text="radio6" AutoPostBack="true" OnCheckedChanged="RadioButton5_CheckedChanged"/><br />
<asp:RadioButton ID="RadioButton9" runat="server" GroupName="lbl" Text="radio7" AutoPostBack="true" OnCheckedChanged="RadioButton9_CheckedChanged"/><br />
<asp:RadioButton ID="RadioButton4" runat="server" GroupName="lbl" Text="radio8" AutoPostBack="true" OnCheckedChanged="RadioButton4_CheckedChanged"/><br />
<asp:RadioButton ID="RadioButton3" runat="server" GroupName="lbl" Text="radio9" AutoPostBack="true" OnCheckedChanged="RadioButton3_CheckedChanged"/><br />
<asp:RadioButton ID="RadioButton10" runat="server" GroupName="lbl" Text="radio10" AutoPostBack="true" OnCheckedChanged="RadioButton10_CheckedChanged"/><br />
</div>
</div>
<input type="hidden" id="div_position" name="div_position" />
关于javascript - 单击表单中的元素时如何停止滚动运动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39738892/