Issue with scrolling on taskboard columns.

[jintech]

Hi,
We are using the css:

.b-taskboard-column-body {
    overflow: auto;
}

which hides the scroll bars on the column body.
This can be done in this online example as well: https://bryntum.com/products/taskboard/examples/simple-task-edit/

However, the scroll doesn't work.
So we added our own scrolling function:

// Mouse scroll event to view records in the same column if all of them are not visible 
$(document).on('mousewheel', '.b-taskboard-column-body', function (e) {

// Determine the direction of the scroll and the amount to scroll.
var delta = e.originalEvent.deltaY || -e.originalEvent.wheelDelta || e.originalEvent.detail;
var scrollAmount = 100; // Amount to scroll in either direction

// Scroll the column content.
this.scrollTop += delta > 0 ? scrollAmount : -scrollAmount;

// Prevent the default scroll behavior.
e.preventDefault();
});

This works fine, we can scroll on each column.
The issue is that for touch pad, the scrolling is very fast but for mouse wheel, it is normal.
How can we fix this? Any idea or suggestions?
Since for both touchpad and mouse wheel, same event is triggered.

[Animal]

Columns scroll naturally when they get full:

Screenshot 2024-06-07 at 15.17.58.png (115.83 KiB) Viewed 1098 times

What extra requirement do you have?

[jintech]

Our extra requirement is to hide the scrollbar, which after doing using the CSS we are getting scroll speed issues between the mouse pad and laptop scrollpad.
Please check below:

If you apply this css given below in this example: https://bryntum.com/products/taskboard/examples/simple-task-edit/

.b-taskboard-column-body {
    overflow: hidden;
}

The scroll bar gets hidden and we can not scroll vertically.
So I provided the code for scrolling above but that raises the scroll speed issues between mouse pad and laptop scrollpad.

// Mouse scroll event to view records in the same column if all of them are not visible 
$(document).on('mousewheel', '.b-taskboard-column-body', function (e) {

// Determine the direction of the scroll and the amount to scroll.
var delta = e.originalEvent.deltaY || -e.originalEvent.wheelDelta || e.originalEvent.detail;
var scrollAmount = 100; // Amount to scroll in either direction

// Scroll the column content.
this.scrollTop += delta > 0 ? scrollAmount : -scrollAmount;

// Prevent the default scroll behavior.
e.preventDefault();
});

Please let us know how to approach with this.

[tasnim]

Hi,

To hide the scroll bar you can simply use this css

.b-taskboard-column-body::-webkit-scrollbar {
  display: none;
}

msedge_cbmDZTklbU.gif (1.52 MiB) Viewed 1010 times

Hope it helps.

Best regards,
Tasnim

[Animal]

To hide scrollbars on overflowing columns in a cross-browser way (Works on Safari and Firefox), after the TaskBoard has been rendered, do this:

const columnBodies = Array.from(document.querySelectorAll('.b-taskboard-column-body'));
columnBodies.forEach(c => c.classList.add('b-widget-scroller', 'b-hide-scroll'));

This will hide the scrollbar, but it will still be scrollable using a mouse wheel.

This does not seems like a good idea hiding scrollbars on platforms where users expect to see scrollbars.

[jintech]

Thanks for the reply, it works as expected