Nur CSS: Wie kann ich die horizontale Bildlaufleiste in einer Chatgpt -Seitenleiste mit Stift immer sichtbar halten? ⇐ CSS

[Anonymous]

Ich verwende die Stylus -Erweiterung, um benutzerdefinierte CSS zu injizieren, die das versteckte Textproblem des Chatgpt -Seitenleiste beheben, indem das horizontale Scrollen aktiviert wird. Mein Ziel ist es, eine horizontale Scrollbar zu haben, die den Inhalt überlagert (oder immer sichtbar bleibt), damit ich nicht ganz nach unten scrollen muss, um ihn zu sehen. Mein aktueller Ansatz erzeugt jedoch eine horizontale obere horizontale Scrollbar, die verschwindet, wenn ich vertikal scrolle. Ich habe verschiedene rotierende Hacks ausprobiert, aber sie kehrt die vertikale Scroll -Reihenfolge um oder drehen zusätzliche Elemente um. Wenn Sie einen Fix beitragen möchten, öffnen Sie eine Pull-Anfrage unter:
https://github.com/cjspd-oly/chatgpt-ss ... ollbar.git

/* Remove mask effects on links to avoid fade-out */
nav[aria-label="Chat history"] a {
mask-image: none !important;
-webkit-mask-image: none !important;
}

/* Ensure text containers display full text without wrapping */
nav[aria-label="Chat history"] .relative.grow.overflow-hidden.whitespace-nowrap {
overflow-x: visible !important;
white-space: nowrap !important;
}

/* Let each list item expand based on its content */
nav[aria-label="Chat history"] li {
width: max-content !important;
}

/* Expand the list container to fit all items */
nav[aria-label="Chat history"] ol {
display: block;
width: max-content !important;
}

/* Enable horizontal scrolling for the sidebar container */
nav[aria-label="Chat history"] .flex-col {
overflow-x: auto !important;
}

/* Add bottom padding so the scrollbar is initially visible */
nav[aria-label="Chat history"] {
padding-bottom: 20px;
}

/* Additional container scroll settings */
nav[aria-label="Chat history"] .flex-col {
overflow-x: auto !important;
overflow-y: auto;
transform: rotateX(0deg);
}

/* Flip child elements (attempting to adjust orientation) */
nav[aria-label="Chat history"] .flex-col > * {
transform: rotateX(180deg);
}

< /code>
Problem: < /strong>
Die horizontale Bildlaufleiste erscheint oben, aber wenn ich vertikal scrolle, wird es versteckt.
Ich möchte die Scrollbar Um den Inhalt zu überlagern oder sichtbar zu bleiben, unabhängig vom vertikalen Scrollen. /> Was ich ausprobiert habe: < /strong> < /p>

• Verwenden von Überlauf-X: Overlay (nicht standardmäßig, funktioniert in einigen Browser)
• Hacks drehen, um die Bildlaufleisteposition zu drehen (die leider vertikale Reihenfolge umgekehrt ist)

Frage: < /strong> < /p>

Wie kann ich meine CSS ändern oder erweitern, damit die horizontale Scrollbar sichtbar bleibt (oder Overlays der Inhalt) Auch wenn vertikale Scrollen durchgeführt werden? Alle Ideen oder Problemumgehungen, die nur CSS verwenden, wären sehr geschätzt!