Topic: Sidebar bug at scrolling

Hennikoe free asked 3 years ago


The sidebar still doesn't work when I scroll the page!I already reported the mistake a few months ago.


Piotr Glejzer staff commented 3 years ago

Ok, we will check it. Is this broken only at a safari or at other browsers too? Did you use other browsers? Have a nice day.


Hennikoe free commented 3 years ago

@Piotr Glejzer The same problem occurs with other browsers. For example Google Chrome for iPhone. Go to the homepage of mdbootstrap.com, open the sidebar and scroll down. Already the sidebar disappears and you have to reload the page manually because it remains gray.


Piotr Glejzer staff answered 3 years ago


I have a solution for this. This is a problem with perfect scrollbar what we are using in our sidenav. This solution will be available with the next release.

#1 You have to add this code to sidenav.js ( to ES6+ version ) to openOnClick() method on line ~416 in the end on that method.

  this.$sidenavOverlay.on('click', () => this.removeMenu());

  this.$sidenavOverlay.on('touchmove', this.touchmoveEventHandler.bind(this));
  this.$menu.on('touchmove', e => {

    e.preventDefault();

    this.$menu.find('.custom-scrollbar').css('padding-bottom', '30px');
  });


#2 Or you can add this code on the same method OpenOnClick but in version ES5+ on ~426 line

_this3.$sidenavOverlay.on('click', function () {
  return _this3.removeMenu();
});

_this3.$sidenavOverlay.on('touchmove', _this3.touchmoveEventHandler.bind(_this3));

_this3.$menu.on('touchmove', function (e) {
  e.preventDefault();

  _this3.$menu.find('.custom-scrollbar').css('padding-bottom', '30px');
});

You can add this to sidenav.js and you can use gulp to compiled first version to second version.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.8.0
  • Device: iPhone X
  • Browser: Safari
  • OS: iOS
  • Provided sample code: No
  • Provided link: No