CODEWITHSUNDEEP
javascriptjqueryhtmlscrollmousewheel
vzhen
vzhen

Reputation: 11157

Not working prevent scrolling parent with mousewheel js

I tried to prevent parent scrolling with mousewheel in Latest Google Chrome but it doesn't work. So I need some explanation with the code.

$(function() {


var toolbox = $('#68').find('.medium-folder-body'),

//The medium-folder-body height - 500px here
height = toolbox.height(),

//scrollHeight 693px (I got the height but don't understand what is that for)
//what is .get(0) ?
scrollHeight = toolbox.get(0).scrollHeight;

toolbox.bind('mousewheel', function(e, d) {

//This is js question which I don't understand often - What is 'this'?
//Second question. What is d?
    if((this.scrollTop === (scrollHeight - height) && d < 0) || (this.scrollTop === 0 && d > 0)) {
      alert(this.scrollTop);
    }
  });

});

The html is quite messy. I make it simple here

<div class="folder">
   <div class="header"></div>
   <div class="medium-folder-body">
     <ul class="photo-lists></ul>
   </div>
   <div class="footer"></div>
</div>

folder-body css height:500px overflow-y:scroll

Upvotes: 0

Views: 461

Answers (1)

Explosion Pills
Explosion Pills

Reputation: 191729

You're not including the additional plugin that handles the mousewheel scroll direction data:

<script src="https://github.com/brandonaaron/jquery-mousewheel/raw/master/jquery.mousewheel.js"></script>

http://jsfiddle.net/ExplosionPIlls/ZQgfr/

Upvotes: 1

Related Questions