Переполнение, работающее на хроме/андроиде, но не в IE/Firefox

-1

При отображении в Chrome/Android веб-сайт отображается так, как предполагалось, но в IE/Firefox появляются некоторые вертикальные полосы прокрутки. Упрощенный код:Переполнение, работающее на хроме/андроиде, но не в IE/Firefox

CSS

html, body { 
    overflow: hidden; 
    position: relative; 
} 

.menu, .slide, .ico { 
    overflow-x: hidden; 
    overflow-y: scroll; 
    position: fixed; 
    height: 100%; 
    width: 100%; 
} 

.menu::-webkit-scrollbar, .slide::-webkit-scrollbar, .ico::-webkit-scrollbar { 
    display: none; 
} 

.container { 
    display: table; 
    height: 100%; 
    position: absolute; 
    overflow: hidden; 
    width: 100%; 
    } 

.links { 
    height: 100%; 
    display: table-cell; 
    vertical-align: middle; 
}

HTML структура

<html> 
<body> 
<div class="menu"> 
<div class="container"> 
<div class="links">

Я надеюсь, что я скопировал достаточный код, чтобы показать проблему. При необходимости я могу связать сайт.

Идея состоит в том, что ссылки div имеют возможность прокрутки по вертикали, но без отображения полосы прокрутки.

Edit: здесь полный код: http://www.jcml.pt

Edit2: Я был в состоянии это исправить (но создал еще одну проблему, как можно видеть на мой ответ).

источник

2015-06-15 JCML

где появляются полосы прокрутки? –

Я добавил ссылку на сайт. – JCML

хорошо ...

overflow-y: scroll;

Средство при переполнении содержания в оси у (вертикальной), показывает полосу прокрутки. Похоже, это то, что вы видите. И этот код работал! (lol)

Попробуйте отрегулировать height: элемента (или родительского элемента), где это происходит, может потребоваться еще несколько пикселей пространства в IE или Firefox, чтобы отобразить все содержимое в вертикальном пространстве; поскольку браузеры отображают/читают несколько иначе (особенно, если они определены как 100% или автоматически).

Затем удалить overflow-y: scroll; оставить это поле пустым или объявить overflow-y: auto; или если ваш еще возникли проблемы, пытаясь определить свои height в пикселях или объявить max-height: с 100%, если ваши еще возникли проблемы, пожалуйста, попробуйте обновить ваш вопрос, так что мы можем полностью понять и предоставить демо-версию и/или скриншот JSfiddle.

источник

2015-06-15 18:36:14

Я использовал .menu :: - webkit-scrollbar, .slide :: - webkit-scrollbar, .ico :: - webkit-scrollbar {display: none;}, чтобы удалить полосу прокрутки, поскольку она выглядит как более элегантное решение, чем создание элемент больше * некоторые * пикселы. Итак, я думаю, это работает только для хром и андроид? – JCML

-1

Поскольку она работает на Chrome, я думал, что я на правильном направлении и искал даже больше вещей, и нашел эту схему: http://blogs.msdn.com/b/kurlak/archive/2013/11/03/hiding-vertical-scrollbars-with-pure-css-in-chrome-ie-6-firefox-opera-and-safari.aspx

я смог это исправить эту проблему путем создания двух контейнеров вместо одного (но теперь он не прокручивается вообще - что-то мне придется поработать позже). Код можно посмотреть здесь: http://www.jcml.pt/3

источник

2015-06-15 19:21:49 JCML

Почему люди просто голосуют, а не говорят мне, что я делаю неправильно? Это не значит, что вы должны приветствовать членов и повышать качество своих сообщений ... – JCML

Переполнение, работающее на хроме/андроиде, но не в IE/Firefox

ответ

Смежные вопросы