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

在具有padding-top:25px和position:relative的div中，存在具有div的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>

最佳答案

这是我使用两个按钮实现的。

你的问题离不开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及其作者

关于html - 如何防止默认的CSS滚动onclick并仅允许javascript事件？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40208128/

myDiv

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