Скрытие полосы прокрутки в старых версиях Mozilla, сохранение прокрутки - PullRequest
0 голосов
/ 01 февраля 2019

Я пишу макет, который имеет три отдельных прокручиваемых столбца изображений, как эта страница.Разница в том, что в нашем дизайне только один пиксель между изображениями.Мне удалось скрыть полосы прокрутки в Chrome и в новейшем Firefox.В Firefox 63.0.1 они все еще там, и мне нужно их скрыть, хотя они все еще сохраняются - возможность прокручивать деления вниз по отдельности - картинки располагаются на расстоянии 1 пиксель друг от друга или шире только для тех старых версий Firefox.

В основном я пытался скрыть визуально через переполнение, скрытое на внешнем контейнере.Для Chrome это работает.

 -ms-overflow-style: -ms-autohiding-scrollbar;
    ::-webkit-scrollbar {
    display: none;
    }

Здесь Я нашел это:

#parent{
    height: 100%;
    width: 100%;
    overflow: hidden;
}

#child{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
    box-sizing: content-box; /* So the width will be 100% + 17px */
}

И здесь Я нашел

body.is-firefox . scroll-container {

    overflow: hidden;
    -webkit-transform: translateX(-18px);
    -ms-transform: translateX(-18px);
    transform: translateX(-18px);
}
body.is-firefox .scroll-container .inner {

    height: 100%;
    -webkit-transform: translateX(18px);
    -ms-transform: translateX(18px);
    transform: translateX(18px);
    overflow-y: scroll;
    overflow-x: hidden;

}

Это было бы прекрасно, если бы между изображениями было больше пробелов, чем 1 пиксель.Или я точно знаю, что это устройство не самое новое из Firefox, тогда я, возможно, смогу воспользоваться этими приемами.

Я искал и читал, что идентификация функций является более правильной и надежной, чем идентификация браузера.Пробовал использовать modernizr , чтобы узнать, какие функции поддерживает пользовательский браузер

.no-cssscrollbar .box { 
color: red;
 }
.cssscrollbar .box {
 color: green;
 }

Не уверен, что я обнаружил правильную функцию или она может определить, что я хочу.В примере с кодом, похоже, он работает.Но если бы я попробовал на своей веб-странице, в Chrome также были классы "no-cssscrollbar", хотя я не вижу никаких полос прокрутки в Chrome и есть возможность их скрыть.

В любом случае: у меня все еще есть полосы прокрутки в firefox 63.0.1 и я думаю, что и более старая версия.

Пожалуйста, помогите мне иметь код для: - Identifyy, если используемый браузер может скрыть полосу прокрутки или нет - определить, используется ли браузер старше Firefox

СпасибоВы

1 Ответ

0 голосов
/ 01 февраля 2019

Используйте этот CSS здесь:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* 
only needed once */

:-moz-any(#content,#appcontent) browser{
margin-right:-14px!important;
overflow-y:scroll;
margin-bottom:-14px!important;
overflow-x:scroll;
}

Источник: https://support.mozilla.org/en-US/questions/1216436#answer-1108340

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...