TSR TSR - 1 month ago 10
CSS Question

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

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>




Answer

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

Comments