如何停止滾動移動當我單擊表格中的項目

我正在使用以下代碼在ASP.NET Web應用程序中創建一個滾動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.NET web窗體<asp:RadioButtonList>，我的後端代碼是C＃，它處理此單選按鈕列表的OnSelectedIndexChanged事件。在ASP.NET單擊單選按鈕時，滾動重置爲頂部位置。

來源

2016-09-28 Mano Prathibhan C

你能分享可執行演示/片斷或[的jsfiddle（https://jsfiddle.net/）？ [_創建一個最小，完整和可驗證的示例_]（http://stackoverflow.com/help/mcve） – Rayon

您可以通過使用javascript [Event Preventdefault]（http://www.w3schools.com/jquery/）來防止點擊event_preventdefault.asp） –

我編輯了我的問題 –

使用此代碼。

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" />

來源

2016-09-28 11:16:25

如何停止滾動移動當我單擊表格中的項目

回答

相關問題