Shadow on scroll

[uglovec]

Hi) I need to show a shadow on the right side of the entire table section for the Gantt and for resources when scrolling horizontally

[Valeria_Ivashkevich]

Hello @uglovec,

You can achieve this shadow effect on the right side of the grid and the resource grid using a combination of CSS and scroll handlers. You can use a CSS ::after pseudo-element that draws a shadow, and toggle a .scrolling class when the user scrolls horizontally.

Here’s how it might be implemented:

1. We create a pseudo-element on both the main grid and the resource grid containers. By default, it’s transparent - but when the .scrolling class is added, we apply a gradient to simulate the shadow:

.gantt-grid::after,
.resource-grid::after {
  content: '';
  position: absolute;
  top: 0;
  right: -10px;
  bottom: 0;
  width: 10px;
  pointer-events: none;
  background: transparent;
  z-index: 2;
  transition: all 0.4s ease-in-out;
}

.gantt-grid.scrolling::after,
.resource-grid.scrolling::after {
  background: linear-gradient(to left, rgba(0, 0, 0, 0.25), transparent);
}

2. Then we find both horizontal scrollbars (.gantt_hor_scroll). When the user scrolls, we add the .scrolling class to show the shadow. And after 150ms of no scrolling, the class is removed, making the shadow fade out:

(function setupScrollHandlers() {
    const ganttGrid = document.querySelector('.gantt-grid');
    const resourceGrid = document.querySelector('.resource-grid');

    let ganttScrollTimer = null;
    let resourceScrollTimer = null;

    // Get all horizontal scrollbars
    const allScrollbars = document.querySelectorAll('.gantt_hor_scroll');

    // First scrollbar - for gantt-grid
    if (allScrollbars[0] && ganttGrid) {
        allScrollbars[0].addEventListener('scroll', function () {
            ganttGrid.classList.add('scrolling');

            clearTimeout(ganttScrollTimer);

            ganttScrollTimer = setTimeout(function () {
                ganttGrid.classList.remove('scrolling');
            }, 150);
        });
    }

    // Second scrollbar - for resource-grid
    if (allScrollbars[1] && resourceGrid) {
        allScrollbars[1].addEventListener('scroll', function () {
            resourceGrid.classList.add('scrolling');

            clearTimeout(resourceScrollTimer);

            resourceScrollTimer = setTimeout(function () {
                resourceGrid.classList.remove('scrolling');
            }, 150);
        });
    }
})();

Please check a full example: DHTMLX Snippet Tool.

Best regards,
Valeria Ivashkevich
DHTMLX Support Engineer