Wj-listbox Issue with scroll when height is reduced

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

    • Post Options:
    • Link

    Posted 26 May 2021, 5:47 pm EST - Updated 30 September 2022, 6:25 am 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;

    }

  • Posted 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