Поддержка кросс-браузерной полосы прокрутки - PullRequest
Новая
       10

Поддержка кросс-браузерной полосы прокрутки

3 голосов
/ 15 января 2020

enter image description here
Я пытаюсь создать собственную полосу прокрутки в css, но это не кросс-браузер, я хочу сделать кросс-браузер с javascript. Полоса прокрутки отсутствует в теле тега. Полоса прокрутки находится в карточке (категории). Вот скриншот:
Нажмите здесь, чтобы посмотреть скриншот
Вот мой html код: 

<section class="quickSearch">
    <div class="quickSearchWrapper">
        <div class="container">
            <div class="quickSearch-header">
                <div class="fw-5">Quick Search</div>
                <a href="#">View All</a>
            </div>
            <div class="quickSearch-body">
                <div class="quickSearch-categories"> // Here is am placing overflow scrollbar 'x axis'
                    <div class="quickSearch-category">
                        <a href="#" class="btn rounded quickSearch-category--name">Creative</a>
                    </div>
                    <div class="quickSearch-category">
                        <a href="#" class="btn rounded quickSearch-category--name">Landing Page</a>
                    </div>
                    <div class="quickSearch-category">
                        <a href="#" class="btn rounded quickSearch-category--name">eCommerce</a>
                    </div>
                    <div class="quickSearch-category">
                        <a href="#" class="btn rounded quickSearch-category--name">Education</a>
                    </div>
                    <div class="quickSearch-category">
                        <a href="#" class="btn rounded quickSearch-category--name">Real Estate</a>
                    </div>
                    <div class="quickSearch-category">
                        <a href="#" class="btn rounded quickSearch-category--name">Corporate</a>
                    </div>
                    <div class="quickSearch-category">
                        <a href="#" class="btn rounded quickSearch-category--name">Agency</a>
                    </div>
                    <div class="quickSearch-category">
                        <a href="#" class="btn rounded quickSearch-category--name">Portfolio</a>
                    </div>
                    <div class="quickSearch-category">
                        <a href="#" class="btn rounded quickSearch-category--name">Restaurants</a>
                    </div>
                    <div class="quickSearch-category">
                        <a href="#" class="btn rounded quickSearch-category--name">Jewellery</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Css Код: 

.quickSearchWrapper{
    position: relative;
    overflow: hidden;
}
.quickSearchWrapper .quickSearch-body .quickSearch-categories{
    display: flex;
    overflow: auto;
}
.quickSearch-categories::-webkit-scrollbar {
    width: 5px; 
    height: 7px;
}
.quickSearch-categories::-webkit-scrollbar-thumb {
    background-color: #1e202a;
    outline: 1px solid #1e202a;
}
.quickSearch-categories::-webkit-scrollbar-thumb {
    border-radius: 50px;
}
.quickSearch-categories::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.2);
}

Я пробовал это, но это не кросс-браузер. Может кто-нибудь сказать, пожалуйста, как я могу сделать так, чтобы он поддерживал все браузеры? Js или что-нибудь? Пожалуйста, помогите мне

Ответы [ 3 ]

2 голосов
/ 15 января 2020

Вы должны добавить разные стили для разных браузеров. Не существует единого простого стиля для всех браузеров

Для Chrome и Safari: 

::-webkit-scrollbar {
  width: 5px; 
  height: 7px;
}

::-webkit-scrollbar-thumb {
  background-color: #1e202a;
  outline: 1px solid #1e202a;
  border-radius: 50px;
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 4px rgba(0,0,0,0.2);
}

Для Firefox: 

@-moz-document url-prefix() {
  .scroller {
    scrollbar-width: thin;
    scrollbar-color: #1e202a;
  }
}

Еще одна вещь. CSS свойство 

 box-shadow

может использоваться без префикса -webkit-. Чтобы убедиться, что для свойства CSS требуется префикс, всегда проверяйте эту ссылку

1 голос
/ 15 января 2020

Лучше использовать javascript для полос прокрутки, поскольку они поддерживаются не всеми браузерами. эти библиотеки являются примерами для использования:

В следующем примере используется simpleBar . см. документацию выше для вариантов. 

new SimpleBar(document.getElementById('container'));
#container {
  width: 300p;
  height: 350px;
  border: 1px solid #eee;
}

.text {
text-align: center;
  padding: 100px 50px;
}
<link rel="stylesheet" href="https://unpkg.com/simplebar@latest/dist/simplebar.css" />
<div id="container">
  <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

  
</div>

<script src="https://unpkg.com/simplebar@latest/dist/simplebar.min.js"></script>

Однако стандарты поставляются с новыми свойствами, но они поддерживаются только для firefox.

Могу ли я использовать - это веб-сайт для проверки поддержки объекта проверить здесь

scrollbar-width 

    scrollbar-width: auto | thin | none | <length>;

scrollbar-width принимает следующие значения:

  • auto является значением по умолчанию и отображает стандартные полосы прокрутки для пользовательского агента.
  • thin скажет пользовательскому агенту использовать более тонкие полосы прокрутки, когда это применимо.

  • none полностью скроет полосу прокрутки, не влияя на прокручиваемость элемента.

  • <length> обсуждается, но (если он будет добавлен) будет максимальной шириной полосы прокрутки.

цвет полосы прокрутки 

    scrollbar-color: auto | dark | light | <color>;

scrollbar-color принимает следующие значения:

  • auto является значением по умолчанию и будет Отобразите стандартные цвета полосы прокрутки для пользовательского агента.
  • dark скажет пользовательскому агенту использовать более темные полосы прокрутки для соответствия текущей цветовой схеме.

  • light скажет пользовательскому агенту использовать более светлые полосы прокрутки для соответствия текущей цветовой схеме.

  • <color> определяет два цвета, которые будут использоваться для полоса прокрутки. Первый цвет предназначен для «большого пальца» или подвижной части полосы прокрутки, которая появляется сверху. Второй цвет предназначен для «дорожки» или фиксированной части полосы прокрутки.

Поэтому используйте сочетание ::-webkit-scrollbar префиксов для chrome и поддерживаемых свойств перечисленные выше для firefox для настройки, в противном случае лучше использовать js, чтобы убедиться, что ваши стили работают в кросс-браузерном режиме.

0 голосов
/ 15 января 2020

Можете ли вы попробовать это CSS

body::-webkit-scrollbar {
  width: 1em;
}

body::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

body::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}
...