amsul / pickadate.js

The mobile-friendly, responsive, and lightweight jQuery date & time input picker.
http://amsul.ca/pickadate.js
MIT License
7.7k stars 1.02k forks source link

Feature request: Option to disable the scroll-blocking #1173

Open kzmi opened 5 years ago

kzmi commented 5 years ago

My site uses

html { overflow-y: scroll; }

for making the vertical scroll bar always visible.

When pickadate popups the date-picker, extra padding appears on the left side of the vertical scroll bar. (pickadate.js 3.6.4)

Sample: https://codepen.io/kzmi/pen/Mdzrvw

I can handle this issue like:

$('.datepicker').pickadate({
  onOpen: function() { $('html').css('overflow', 'hidden') },
  onClose: function() { $('html').css('overflow', '') }
});

but this workaround seems not a good solution. This workaround depends on the behavior of the pickadate's scroll-blocking.

If the scroll-blocking feature can be disabled, I can control the scroll-blocking with other way.

For example,

$('.datepicker').pickadate({
  ...
  noScrollBlocking: true,    // example of the new option
  ...
  onOpen: function() { myBlockScroll() },
  onClose: function() { myUnblockScroll() }
});
DanielRuf commented 5 years ago

Hi @kzmi

for making the vertical scroll bar always visible.

In general this is not a good approach. Normally it should not be possible to scroll the background when the picker is open so this change does not make much sense.

kzmi commented 5 years ago

What I want is a method to control the page scroll in another way. Currently, pickadate controls the page scroll and it is not easy to override.

I thought this issue was not a special case.

For example, imagine that pickadate is used in the modal dialog. If the framework controls the modal dialog and the page scroll, pickadate's scroll-blocking may conflict with it.

Demo1 (with Bootstrap Modal): https://codepen.io/kzmi/pen/yWQjPy

Demo2 (with Micromodal.js): https://codepen.io/kzmi/pen/EzGNrp

Though it is not possible to provide the perfect scroll-blocking, the option to disable it will help to solve the issue.