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

Ответ 1

потому что overflow-x: hidden; в строке base.css номер 9

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

Ответ 2

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

от

overflow:auto;

к

overflow:auto;
overflow:initial;

Это ваша проблема

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

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

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

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

Надеюсь, это поможет..:)

Ответ 3

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>

Что важно для мобильных и настольных браузеров. Фактически на данный момент я тестировал мобильный телефон на краю окон, когда мой компьютер перешел в режим планшета, а затем рабочий стол. Код работает все время. Чтобы проверить, работает ли это с этим: перед, а не div id = "aaaa", чтобы сделать его более чистым css и дополнительными divs-зависимыми.

Обновление: это не сработает, прежде чем для браузера Edge не изменится полоса прокрутки при входе в планшет.

Если вы столкнулись с проблемами со скрытым содержимым в элементе bbbb, попробуйте не позиционировать: абсолютные/фиксированные элементы в контейнере bbbb.

Я еще не тестировал его для всех ситуаций и браузеров.

Обновление: проблема, о которой упоминалось, где-то в верхней части этого ответа; однако в браузерах мобильных браузеров полоса прокрутки закрыта, потому что полоса прокрутки динамическая - она ​​появляется только тогда, когда ваша прокрутка и вы знаете, что она не является частью любые контейнеры. Полоса прокрутки, вероятно, довольно тонкая во всех браузерах, поэтому вы должны решить, что с ней делать. Может быть, немного 5 пикселей или так?

Ответ 4

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