Question

在包含padding-top:25px和position:relative的div中，div的{{1}}包含class='mydiv' span以及其他几个position:absolute元素.mydiv具有有限的height和overflow-y set to auto。 span使用div退出top:0px。当我们向下滚动.mydiv，然后点击span时，.mydiv 会因未知原因向上滚动。这是不需要的。如何防止这种情况，同时允许span为我的javascript听取其他事件？

以下是问题的片段：

    <!DOCTYPE html>
    <html>
       <head>
          <style>
             .mydiv {
             border: 1px solid black;
             height: 100px;
             overflow-y: auto;
             }
             .container {
             padding-top: 25px;
             position: relative;
             }
             .event {
             position: absolute;
             top:0;
             border: solid 2px black;
             color: red;
             }
             .event:hover {
             cursor:pointer;
             }
          </style>
          <script>
             function myevent() {
             console.log('Event triggered');
             }
          </script>
       </head>
       <body>
          <div class="container">
             <div class="mydiv">
                <span class="event" type="button" onClick='myevent();'>CLICK ME EVENT LISTENER (scroll down before) </span>
                Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>
             </div>
          </div>
          <p>For some reason, this html code has to keep this structure. When the user click of event listener, the div should not scroll up.</p>
       </body>
    </html>

Answer 1

以下是我使用两个按钮实现的内容。

你的问题不能没有jquery scrollTop函数

function preventDefault(e) {
  e = e || window.event;
  if (e.preventDefault)
      e.preventDefault();
  e.returnValue = false;  
}
function event1() {
  console.log('Event triggered');
  if (window.addEventListener)
      window.addEventListener('DOMMouseScroll', preventDefault, false);
  window.onwheel = preventDefault;
  
}

function event2() {
  console.log('Event triggered');
    if (window.removeEventListener)
        window.removeEventListener('DOMMouseScroll', preventDefault, false);
     
    window.onwheel = null; 
     
}

<!DOCTYPE html>
    <html>
       <head>
          <style>
             .mydiv {
             border: 1px solid black;
             height: 100px;
             overflow-y: auto;
             }
             .container {
             padding-top: 25px;
             position: relative;
             }
             .event {
             position: relative;
             top:0;
             border: solid 2px black;
             color: red;
             }
            .event1 {
             position: relative;
             border: solid 2px black;
             color: red;
             }
             .event1:hover {
             cursor:pointer;
             }
            .event2:hover {
             cursor:pointer;
             }
          </style>
         
       </head>
       <body>
          <div class="container">
            <span class="event1" type="button" onClick='event2();'>CLICK ME to enable scrolling (scroll down before) </span>
             <div class="mydiv">
                
                Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>
             </div>
            <span class="event2" type="button" onClick='event1();'>CLICK ME to disable scrolling (scroll down before) </span>
          </div>
          <p>For some reason, this html code has to keep this structure. When the user click of event listener, the div should not scroll up.</p>
       </body>
    </html>

//完全归属于thread及其中的作者

如何防止默认的Css滚动onclick并仅允许javascript事件？

1 个答案: