Только CSS: как я могу сохранить горизонтальную прокрутку, всегда видимой в боковой панели CATGPT, используя стилус? ⇐ CSS

[Anonymous]

Я использую расширение Stylus для инъекции пользовательских CSS, которая устраняет скрытую проблему боковой панели ChatGPT, обеспечивая горизонтальную прокрутку. Моя цель состоит в том, чтобы иметь горизонтальную прокрутку, которая накладывает содержание (или остается видимым в любое время), чтобы мне не приходилось прокручивать весь путь, чтобы увидеть его. Тем не менее, мой текущий подход создает верхнюю горизонтальную прокрутку, которая исчезает, когда я прокручиваю вертикально. Я пробовал различные взломы вращения, но они в конечном итоге отменяют порядок вертикальной прокрутки или перевернув дополнительные элементы. Если вы хотите внести свой вклад, не стесняйтесь открыть запрос на вытяжение по адресу:
https://github.com/cjspd-oly/chatgpt-cs ... 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>
Проблема: < /strong>
Горизонтальная прокрутка появляется вверх Чтобы наложить содержание или оставаться видимым независимо от вертикальной прокрутки.
Я ищу чистое решение CSS - без JavaScript. < /p>
Что я пробовал: < /strong> < /p>

• Использование Oupflow-x: Overlay (нестандартное, работает в некоторых Браузеры)
• Поверните взломы, чтобы перевернуть позицию прокрутки (что, к сожалению, обратный вертикальный порядок)

Вопрос: < /strong> < /p>

Как я могу изменить или расширить свой CSS, чтобы горизонтальная прокрутка оставалась видимой (или накладыванием Содержание) Даже когда сделана вертикальная прокрутка? Любые идеи или обходные пути, использующие только CSS, были бы очень оценены! < /Li>
< /ul>
Заранее спасибо за вашу помощь!


Подробнее здесь: https://stackoverflow.com/questions/794 ... chatgpt-si