2 replies

Sticky Labels in an Overflow-X div

I currently have a component like in the picture. When I scroll left/right only the overflow-x div scrolls.

The div contains a list of numbers at the top, that you can see in blue in the second picture

At the moments the numbers are in an absolute overlay like so:

{renderSegments.map((segment, index) => (
    <>
      <div
        className="absolute h-full bg-sky-500 transition-opacity"
        style={{
          left: `${segment.start}px`,
          width: `${segment.width}px`,
          opacity: segment.opacity,
        }}
      />

        <div
          className="absolute top-1/2 -translate-y-1/2 text-xs text-white"
          style={{
            left: `${segment.start + 3}px`,
            zIndex: 10,
          }}
        >
          {segment.charges}
        </div>
      )}
    </>
  ))}

{renderSegments.map((segment, index) => (
    <>
      <div
        className="absolute h-full bg-sky-500 transition-opacity"
        style={{
          left: `${segment.start}px`,
          width: `${segment.width}px`,
          opacity: segment.opacity,
        }}
      />

        <div
          className="absolute top-1/2 -translate-y-1/2 text-xs text-white"
          style={{
            left: `${segment.start + 3}px`,
            zIndex: 10,
          }}
        >
          {segment.charges}
        </div>
      )}
    </>
  ))}

I would like for the numbers to remain sticky to the left border of the div when scrolling to the right. In picture 3 if I scroll more to the right the 1 should stay fixed until the next number.

I assume that hiding the numbers when the next one is close is not something I can (should) do in CSS but I was wondering if there was a way for the elements to stay sticky using CSS.

Anyone has anything I can try?

KP-C

Kevin Powell - Community•10mo ago•

2 replies

vinter.

Sticky Labels in an Overflow-X div

{renderSegments.map((segment, index) => (
    <>
      <div
        className="absolute h-full bg-sky-500 transition-opacity"
        style={{
          left: `${segment.start}px`,
          width: `${segment.width}px`,
          opacity: segment.opacity,
        }}
      />

        <div
          className="absolute top-1/2 -translate-y-1/2 text-xs text-white"
          style={{
            left: `${segment.start + 3}px`,
            zIndex: 10,
          }}
        >
          {segment.charges}
        </div>
      )}
    </>
  ))}

{renderSegments.map((segment, index) => (
    <>
      <div
        className="absolute h-full bg-sky-500 transition-opacity"
        style={{
          left: `${segment.start}px`,
          width: `${segment.width}px`,
          opacity: segment.opacity,
        }}
      />

        <div
          className="absolute top-1/2 -translate-y-1/2 text-xs text-white"
          style={{
            left: `${segment.start + 3}px`,
            zIndex: 10,
          }}
        >
          {segment.charges}
        </div>
      )}
    </>
  ))}

Sticky Labels in an Overflow-X div

Similar Threads

Sticky Labels in an Overflow-X div

Similar Threads

Similar Threads

Similar Threads