Disable mouse scroll

Asked

Viewed 1,221 times

1

My code.

Css: 

td div{
 width:100%; 
 height: 40px; 
 overflow: hidden; 
 padding-top: 9px;
}
 td div:hover{
  overflow: auto;
}

Html:

<td><div><?php echo $objProg->getagen(); ?></div></td>

inserir a descrição da imagem aqui

When putting the mouse on top of the td would like the option to scroll with the mouse scroll not to work, to only be able to scroll the text by clicking the arrows.

html css

2 answers

2

Using jQuery you can do this in a few ways. You can simply disable the scroll as you wish, or force scroll operating only in the div in question.

Would that be the case:

$('#good').bind('mousewheel DOMMouseScroll', function(e) {
    var scrollTo = null;

    if (e.type == 'mousewheel') {
        scrollTo = (e.originalEvent.wheelDelta * -1);
    }
    else if (e.type == 'DOMMouseScroll') {
        scrollTo = 40 * e.originalEvent.detail;
    }

    if (scrollTo) {
        e.preventDefault();
        $(this).scrollTop(scrollTo + $(this).scrollTop());
    }
});

$('#bad').hover(function() {
    $(document).bind('mousewheel DOMMouseScroll',function(){ 
        stopWheel(); 
    });
}, function() {
    $(document).unbind('mousewheel DOMMouseScroll');
});


function stopWheel(e){
    if(!e){ /* IE7, IE8, Chrome, Safari */ 
        e = window.event; 
    }
    if(e.preventDefault) { /* Chrome, Safari, Firefox */ 
        e.preventDefault(); 
    } 
    e.returnValue = false; /* IE7, IE8 */
}
body { min-height: 1200px; padding: 30px; }
p { height: 500px; }
div#bad {
    position: absolute;
    top: 70px;
    left: 330px;
    height: 200px;
    width: 200px;
    background-color: lightgray;
    overflow: scroll; 
}

div#good {
    position: absolute;
    top: 70px;
    left: 30px;
    height: 200px;
    width: 200px;
    background-color: gray;
    overflow: scroll; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Scroll to bottom of each div</div>
<div id="good">
    <p>Scroll somente na div</p>
    End of Div
</div>
<div id="bad">
    <p>Remove Scroll jQuery</p>
    End of Div
</div>

Too many shapes, you can look in this question I used as a reference.

2


  • Just for the record, if you’re interested you have the "Fiddle" of the site itself, which is the < > leaf icon in the answer toolbar (but it’s perfectly normal to use JS Fiddle as well)

  • I used the one from the site, but if I click off accidentally it doesn’t save the code, then I prefer to use jsfiddle. but vlw by tip.

  • Only thing I didn’t find very interesting is that when the mouse is on top of the div the scroll of the page itself does not scroll either.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.