3

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?

Darius Frank
  • 101
  • 4

2 Answers2

2
  • 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

spring
  • 760
  • 4
  • 10
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();
});
user956584
  • 5,316
  • 3
  • 40
  • 50