Lines in fixed scrolling container

[GensaGames]

This might be out of support request, so you can close it, if so. I have scrolling container and lines goes out of bounds. Because it's static, and not dynamic draw, but it could be static within container, right? Is it possible to solve it? Thanks.

[kdeloach]

You could try using the within property which is the CSS class name of the container element.

[GensaGames]

It's already within container. I have this page with vertical scrolling, and within fixed this issue. Now this particular component has also horizontal scrolling.

From the image above there are two rows. First doesn't have too many items and they fit inside the component. The second (image above) has horizontal scroll. I tried to play around with within, but it didn't help.

[mahir-cognitiv]

GensaGames, did you figure this out? I am still having trouble with a vertical scrolling container! When i scroll vertically, the lines stay in place but the rest of my components move. I tried using an onScroll update function which works...but the re rendering constantly causes the lines to flash and lag behind the other components making it unusable

[dongyuwei]

@mahir-cognitiv you can add a debounce to reduce the re-render, the following is a custom React hook:

import React, { RefObject, useEffect, useState } from 'react';
import debounce from 'debounce';

export const useUpdaterOnScroll = (ref: RefObject<any>, duration: number = 100) => {
  const [state, updateState] = useState({});
  const forceUpdate = React.useCallback(() => updateState({}), []);
  useEffect(() => {
    const resizeHandler = debounce(() => {
      forceUpdate();
    }, duration);
    window.addEventListener('resize', resizeHandler, false);
    const element = ref?.current;
    element?.addEventListener('scroll', resizeHandler, false);
    return () => {
      window.removeEventListener('resize', resizeHandler);
      element?.removeEventListener('scroll', resizeHandler, false);
    };
  }, [forceUpdate]);

  return state;
};

[rayonhunte]

Hello, has this issue been resolved? I have some lines in a react modal instance, the lines are always on top even when I change the modal z index. Please see the screenshot, any suggestions would be welcome.