PerfectScrollbar can't use wheel in bootstrap modal

Question

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 ?

score 0 · Accepted Answer · answered Aug 14 '19 at 23:24

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/

PerfectScrollbar can't use wheel in bootstrap modal

1 Answers1