How to prevent default Css scroll onclick and allow javascript event only?

Question

In a div with padding-top:25px and position:relative, there is a div with class='mydiv' that contain a span with position:absolute and several other elements .mydiv has a limited height and an overflow-y set to auto. The span goes out of the div using top:0px. When we scroll the .mydiv down, and then click on the span, the .mydiv scrolls up for unknown reason. This is unwanted. How can I prevent that and at the same time allow other events to be listened by the span for my javascript?

Here is the snippet of the problem:

    <!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>

`value="my event"` since when `value` is a valid `` attribute? Same goes for `type="button"` — Roko C. Buljan, Oct 23 '16 at 22:17
@RokoC.Buljan if you scroll down, before you click on it, the div should scroll up. I am using chrome too — TSR, Oct 23 '16 at 22:22
1. I scroll the DIV. 2. I click that funny `span` with wrong attributes Result: Nothing scrolls up. The DIV is still scrolled where it was. — Roko C. Buljan, Oct 23 '16 at 22:23
If you're using `a` instead of `span` you could `event.preventDefault();` but that's clearly not your issue. — Roko C. Buljan, Oct 23 '16 at 22:25

score 1 · Accepted Answer · edited May 23 '17 at 12:33

Here is what i have implemented using the two buttons.

Your question cant do without jquery scrollTop function

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>

//full attribution to thread and authors in it

How to prevent default Css scroll onclick and allow javascript event only?

1 Answers1