Infinite Scroll Trap

html

<div class="ist-demo" style="--accent:#F5C2E0;">
  <span class="ist-demo__badge">{{unless fixed}}&#10007; Anti-pattern: infinite scroll trap

tailwind

<div style="width:280px;font-family:system-ui,sans-serif;color:#241430">
  <span class="ist-tw-badge inline-block px-2.5 py-0.5 rounded-full text-[11px] font-bold mb-2.5">{{unless fixed}}&#10007; Anti-pattern: infinite scroll trap

react

export function InfiniteScrollTrap({
  title = "Feed",
  fixed = false,
  count = 240,
  accent = "#F5C2E0",
}) {
  return (
    <div style={{ width: 280, fontFamily: "system-ui, sans-serif", fontSize: 13, color: "#241430" }}>
      <span style={{ display: "inline-block", padding: "3px 10px", borderRadius: 999, fontSize: 11, fontWeight: 700, marginBottom: 10, background: fixed ? "#1a7a44" : "#b3261e", color: "#FAF7F2" }}>
        {fixed ? "\u2713 Better" : "\u2717 Anti-pattern: infinite scroll trap"}
      </span>
      <p style={{ margin: "0 0 6px", fontWeight: 700 }}>{title}</p>
      <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
        {["Post", "Post", "Post"].map((p, i) => <div key={i} style={{ padding: 12, borderRadius: 8, background: "#24143010" }}>{p}</div>)}
      </div>
      {!fixed && <p style={{ margin: "10px 0 0", fontSize: 11, color: "#b3261e", fontWeight: 600 }}>Loading more\u2026 ({count} shown, footer unreachable)</p>}
      {fixed && (
        <>
          <div style={{ marginTop: 10, display: "flex", alignItems: "center", gap: 6 }}>
            <button type="button" style={{ width: 26, height: 26, borderRadius: 6, border: "1.5px solid " + accent, background: accent, fontWeight: 700, cursor: "pointer" }}>1</button>
            <button type="button" style={{ width: 26, height: 26, borderRadius: 6, border: "1.5px solid #24143033", background: "transparent", cursor: "pointer" }}>2</button>
            <button type="button" style={{ width: 26, height: 26, borderRadius: 6, border: "1.5px solid #24143033", background: "transparent", cursor: "pointer" }}>3</button>
            <span style={{ color: "#241430aa" }}>&hellip;</span>
          </div>
          <p style={{ margin: "10px 0 0", fontSize: 11, color: "#1a7a44", fontWeight: 600 }}>Site footer \u2014 reachable</p>
        </>
      )}
    </div>
  );
}