Issue with jQuery scroll event

[arunschandran]

Thanks for this great plugin. I am using this plugin for my sites. I am working on a new site and I found an issue while I adding Slidebars plugin. I love this plugin, so I don't want to replace this plugin. I want you to help me resolve this issue

ISSUE

My jQuery Scroll event was working fine. But when I added Slidebar, scroll event is not working. I can't see any jQuery error in console. I have tried scroll event using differnt selectors like document, #sb-site etc..

$(document).scroll(function() {
alert("Hi");
});

$("#sb-site").scroll(function() {
alert("Hi");
});

can you please advice? Thanks in advance

[lbbcdot]

I have same issue. This code working at another page, but not with the one with slidebars.

$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

Any ideas how to solve this issue? Thanks

[Mgamerz]

This happens for me as well, but I am unsure if this is a chrome issue only or not. Mine works in firefox but with chrome no matter what I always get 0 for the current scroll offset (and as such, scroll() is never fired). It could be a mix of both.

https://code.google.com/p/chromium/issues/detail?id=157855

It's sad that nearly 4 years later their bug is still not fixed. I have found no way to actually get the scroll position or get it to fire scroll()...

[eiswurm]

same here, all jquery scroll functions are not working, it seems to be caused by slidebars.css, specially:

[canvas=container] { width: 100%; height: 100%; overflow-y: auto; position: relative; background-color: white; /* Basic background color, overwrite this in your own css. / -webkit-overflow-scrolling: touch; / Enables momentum scrolling on iOS devices, may be removed by setting to 'auto' in your own CSS. */ }

any workaround?

(using version 2.0.2)

[adchsm]

This might be of help to you! https://www.adchsm.com/slidebars/help/advanced-usage/scrolling-the-html-or-body-elements/

You need to scroll the canvas container as opposed to the html or body elements.

[bpongy]

same bug for me, with slidebars 2.0.2. I changed these lines:

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

to:

html, body {
    width: 100%;
    overflow-x: hidden;
}

@adchsm I checked your answer. but the problem is sometimes jquery plugins are based on window scroll event.

[max-ci]

@redpik do you have any problems with Slidebars after this change?

@adchsm can you explain in which cases removing height: 100% and overflow: hidden from body can be problematic?

[bpongy]

@makshh nope. but I need to test on other devices.

[max-ci]

It seems like there is a problem with for example "top shift" with fixed navbar when you remove height and overflow-y.

CODEPEN (look at the fixed navbar position during scrolling when slidebar is opened, it works good only with overlay and push)