Create an outOfBound event with what panels are not in viewport and which sides of viewport are overflowing

[JoeLimewire]

I was looking for a solution to add some inset shadows to either side of the viewport if any panels were overflowing on that side. I couldn't find a nice event/ solution to my issue so I ended up making this sort of function (React.jsx):

onMove = {({ currentTarget }) => {
    const viewportElement = currentTarget.viewport.element;
    const panels = currentTarget.panels.map(panel => panel.element);
    const viewportRect = viewportElement.getBoundingClientRect();

    if (panels.length <= 0) return;

    const firstPanelBound = panels[0].getBoundingClientRect();
    const lastPanelBound = panels[panels.length - 1].getBoundingClientRect();

    const isOverflowingLeft = firstPanelBound.left < viewportRect.left;
    const isOverflowingRight = lastPanelBound.right > viewportRect.right;

    if (!isOverflowingLeft || !isOverflowingRight) {
        viewportElement.style.boxShadow = '';
    }

    if (isOverflowingLeft) {
        viewportElement.style.boxShadow = 'inset 7px 0 9px -7px rgba(0,0,0,0.4)';
    }

    if (isOverflowingRight) {
        viewportElement.style.boxShadow = 'inset -7px 0 9px -7px rgba(0,0,0,0.4)';
    }

    if (isOverflowingLeft && isOverflowingRight) {
        viewportElement.style.boxShadow = 'inset 7px 0 9px -7px rgba(0,0,0,0.4), inset -7px 0 9px -7px rgba(0,0,0,0.4)';
    }
}}

[malangfox]

Hello @JoeLimewire.

You can use flicking.visiblePanels and panel.visibleRatio with the visibleChange event for your implementation.

I've created a demo similar to the implementation you wants.
You can check that shadows are set for Panels that go off the edge of the screen.

I hope this can help you with your implementation, feel free to leave a comment if you have any more questions!

[malangfox]

Since there is no further comment, we will close the discussion.