Браузер scrollbar находится под моим фиксированным div
У меня есть фиксированный заголовок с 100% шириной.
#header {
background: #2e2e2e;
width: 100%;
z-index: 999;
position: fixed;
}
browsers полоса прокрутки находится под моим фиксированным div. Как это исправить?
6 ответов
его, потому что overflow-x: hidden;
в базу.css строка номер 9
body {
color: #444444;
font: 13px/20px Arial,Helvetica,sans-serif;
overflow-x: hidden; // remove this
}
Это можно решить, добавив переполнение тела
С
overflow:auto;
to
overflow:auto;
overflow:initial;
Если ваш свиток установлен на теле, если его структура как тело > оболочка > заголовок (с фиксированной позицией), содержание так далее
ниже ваше решение
Примечание: это будет работать только на теле, но не на контейнер div с прокруткой. вы также можно работать с z-index, чтобы заставить его работать, но вы будете указывать z-index для стека других элементов, чтобы получить его правильно.
надеюсь, что это помогает..:)
проблема не в overflow-x
на тег body. Это из-за overflow-x
иoverflow-y
на html
тег. Как только я удалил это из тега HTML, я мог поместить любое переполнение, которое я хотел, на мое тело.
это происходит, когда:
-
overflow-x
выбрано значениеauto
,hidden
,overflow
илиscroll
-
overflow-y
выбрано значениеauto
,hidden
,-webkit-paged-x
или-webkit-paged-y
это не обязательно явный вызов overflow-x
или overflow-y
, as overflow
устанавливает оба из них.
я на Chrome 67 с помощью Windows 10.
CSS hack (я, наконец, нашел способ) для этого с небольшим объяснением, сделанным быстро - первый плавающий элемент. Я думаю, чтобы понять принцип, как он работает из кода ниже.
обновление: и есть проблема для мобильных браузеров см. ниже, чтобы оценить, все ли в порядке с ним.
<div style="position: fixed;top: 0;width: 100%;left: 0;z-index: 100000;height: 200px;background: #f00;">
<div id="aaaaa" style="display: block;float:right;color: #000;overflow-y:scroll;min-height:20px;top: -100px;background: #0f0;border: 1px solid #0f0;"></div>
<div id="bbbb" style="display: block;position:relative;color: #000;overflow:hidden;min-height:20px;background: #f0f;border: 1px solid #00f;">sdfasdf sdfas s as as fasd fasd fasdfasd fasd asdf asd fasdf sadf asdf asdf asdf sad fasdf asdf asdf asd fasdf asdf asdf asd fsad sad sfd
<div style="width: 100%;height: 20px;background: #5ff"></div>
</div>
и окончательный код, почти то же самое с вещами, которые вы хотите видеть видимыми и работающими
<div style="position: fixed;top: 0;width: 100%;left: 0;z-index: 100000;height: 0px;overflow:visible;background: #f00;">
<div id="aaaaa" style="display: block;float:right;color: #000;overflow-y:scroll;visibility:hidden;min-height:20px;top: -100px;background: #0f0;border: 1px solid #0f0;"></div>
<div id="bbbb" style="display: block;position:relative;color: #000;overflow:hidden;min-height:20px;background: #f0f;border: 1px solid #00f;">sdfasdf sdfas s as as fasd fasd fasdfasd fasd asdf asd fasdf sadf asdf asdf asdf sad fasdf asdf asdf asd fasdf asdf asdf asd fsad sad sfd
<div style="width: 100%;height: 20px;background: #5ff"></div>
</div>
что важно он работает с мобильными и настольными браузерами. На самом деле на данный момент я тестировал mobile на Windows edge, когда мой компьютер перешел в режим планшета, а затем на рабочий стол. Код работает тогда все время. Чтобы проверить, работает ли это с: раньше вместо div id= "aaaa", чтобы сделать его более CSS чистым и дополнительным divs зависимым.
Update: он не работает хорошо с before for Edge browser не изменяет полосу прокрутки при входе в планшет режим.
при возникновении проблем со скрытым содержимым в элементе bbbb постарайтесь не размещать: абсолютные / фиксированные элементы в контейнере bbbb.
Я еще не тестировал его для всех ситуаций и браузеров.
обновление: вопрос где - то в верхней части этого ответа - но на мобильных браузерах полоса прокрутки покрыта, потому что полоса прокрутки динамична-она появляется только при прокрутке, и вы знаете, что она не является частью каких-либо контейнеров. Этот полоса прокрутки, вероятно, довольно тонкая во всех браузерах, поэтому вы должны решить, что с ней делать. Может быть, немного 5 пикселей или около того?
У меня была эта проблема, моя полоса прокрутки была под моим фиксированным заголовком, и я решил это после удаления из моего html-тега height: 100%;
и я добавил другие приличия, чтобы убедиться, что у меня тот же результат. Ни одно из других решений мне не помогло. Надеюсь, это кому-то поможет.
была такая же проблема в приложении react.
двигался overflow-y: scroll
стиль #root
to body
селектор. Это решило проблему для меня.