Search code examples
jqueryperfect-scrollbar

PerfectScrollbar can't use wheel in bootstrap modal


Using PerfectScrollbar 0.6.11, I can't have the wheel of my mouse scroll the element in a modal.

Here is a fiddle : https://jsfiddle.net/9e64aspu/

$('#modal-filters').on('shown.bs.modal', function () {
      $('#filters-scroll').perfectScrollbar({
            suppressScrollY : true,
            handlers: ['click-rail', 'drag-scrollbar', 'wheel', 'touch'],
            wheelPropagation: true
     });
});

Scrollbar is displaied, but I can't use wheel to scroll. Is it normal ?


Solution

  • you need to add this option useBothWheelAxes: true

    your js code should look like this

    $(function() {
        $('#modal-filters').on('shown.bs.modal', function() {
            $('#filters-scroll').perfectScrollbar({
                suppressScrollY: true,
                theme: 'dark',
                handlers: ['click-rail', 'drag-scrollbar', 'wheel', 'touch'],
                wheelPropagation: true,
                useBothWheelAxes: true,
            });
        });
    });
    

    updated fiddle https://jsfiddle.net/5wkbszd3/3/