wj-listbox Issue with scroll when height is reduced

Posted by: pmithilesh on 26 May 2021, 5:47 pm EST

  • Posted 26 May 2021, 5:47 pm EST

    Hi ,
    I am using wijmo list box .i have reduce the List box items height to 14 px with font size 12. total height of the list box is 70 pixes
    Issue: when i use the mouse wheel it does not scroll to the exact next record s example it shows (1-3 records) and once i use the wheel it shows (6-9) record.so it skips 4 and 5 record.
    is there way we can adjust the scroll thumb for the wheel?

    Thanks

    .wj-listbox-item {
    height: 14px !important;
    min-height: 16px;
    font-size: 12px !important;
    }
  • Marked as Answer

    Replied 31 May 2021, 3:55 pm EST

    Hi,

    The scroll is controlled by the mouse scroll speed, if you wants to control it then you may handle the wheel event on the Listbox hostElement and update the scrollTop property as required. Please refer to the following code snippet and the sample demonstrating the same:
    list.hostElement.addEventListener(
    "wheel",
    (e) => {
    e.preventDefault();
    e.stopPropagation();

    // set custom delta size
    let deltaY = 14;
    list.hostElement.scrollTop += e.deltaY > 0 ? deltaY : -deltaY;
    },
    true
    );

    https://codesandbox.io/s/wijmo-starter-forked-k6req?file=/src/index.js

    Regards
    Sharad
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels