jQuery，jscrollpane - 防止 window 在到达 div 末尾时滚动

Question

I'm trying to prevent the browser window to scroll if I've reached the top or bottom of my jscrollpane div. Tinyscrollbar does that.

with jscrollpane I can detect the div scrolling with something like that:

var jsp = $(".scroll-pane").data('jsp'); // getting hold of the api
jsp = $("#" + e.attr('id') + " > .feed-items").bind(
    'jsp-scroll-y', function(e, scrollPositionY, isAtTop, isAtBottom) {
        // reached bottom
        if (jsp.getPercentScrolledY() == 1) {
        } else {
            // ...
        }
    })

I tried using e.preventDefault() and it didn't work. I tried everything in my magic box, from returning false to stopping propagation. Nothing works. There was this nice hack:

$("body").css("overflow", "hidden")
         .css('margin-left', "-" + __scrollbarWidth + "px");

But I don't want to use this as it's not perfect.

Any ideas?

Answer 1

• You must add for example class test to the div

• add some javascript:

   $(document).on('mousewheel', '.test', function (e) { var delta = e.originalEvent.wheelDelta; this.scrollTop += (delta < 0? 1: -1) * 30; e.preventDefault(); });

its for vertical scroll. if you want to do same for horizontal scroll let me know

Answer 2

I don't know why its working but when you reach bottom or top on mouse scroll wheel its stop scrolling;)

/* Stop scrolling */
$('#cnct_form').bind('jsp-scroll-y',function(event, isScrollable)   {
      console.log('asd');
}).jScrollPane();

$('#cnct_form').mousewheel(function(event) {
    event.preventDefault();
});