Браузер scrollbar находится под моим фиксированным div

У меня есть фиксированный заголовок с 100% шириной.

#header {
background: #2e2e2e;
width: 100%;
z-index: 999;
position: fixed;
}

browsers полоса прокрутки находится под моим фиксированным div. Как это исправить?

scrollbar

35
css css-position

6 ответов

его, потому что overflow-x: hidden; в базу.css строка номер 9 

body {
    color: #444444;
    font: 13px/20px Arial,Helvetica,sans-serif;
    overflow-x: hidden; // remove this 
}
31

Это можно решить, добавив переполнение тела

С

overflow:auto;

to

overflow:auto;
overflow:initial;

ваш вопрос

Если ваш свиток установлен на теле, если его структура как тело > оболочка > заголовок (с фиксированной позицией), содержание так далее

ниже ваше решение

решение проблемы

Примечание: это будет работать только на теле, но не на контейнер div с прокруткой. вы также можно работать с z-index, чтобы заставить его работать, но вы будете указывать z-index для стека других элементов, чтобы получить его правильно.

надеюсь, что это помогает..:)

9

проблема не в 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.

2

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 пикселей или около того?

1

У меня была эта проблема, моя полоса прокрутки была под моим фиксированным заголовком, и я решил это после удаления из моего html-тега height: 100%; и я добавил другие приличия, чтобы убедиться, что у меня тот же результат. Ни одно из других решений мне не помогло. Надеюсь, это кому-то поможет.

1

была такая же проблема в приложении react.

двигался overflow-y: scroll стиль #root to body селектор. Это решило проблему для меня.

0