Как реализовать скролл в шапке сайта?

Question

Мне очень требуется сделать такой же сайдбар с категориями, как это показано ниже:

Я рылся в интернете, но ничего не показало полезного, даже приблизительно не то, что надо. С помощью какой библиотеки или ванильного решения можно грамотно реализовать что-то такого рода? Также буду благодарен за уточнение как называются такие сайдбары.

Answer 1

Сделать это можно и без JS, на базе стандартного скроллбара. Touch-устройства умеют с ним работать. Вопрос лишь в способе его сокрытия. Один из возможных вариантов:

#menuwrap {
    overflow: hidden;
    position: relative;
    border-bottom: 1px solid #ccc;
}

/* затенение градиентом */
#menuwrap:before, #menuwrap:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    width: 80px;
    pointer-events: none;   
}

#menuwrap:before {
  left: 0;
  background: linear-gradient(270deg,hsla(0,0%,100%,0) 0,#fff 90%,#fff);
}

#menuwrap:after {
  right: 0;
  background: linear-gradient(90deg,hsla(0,0%,100%,0) 0,#fff 90%,#fff);
}
/*-//-*/

#menu {
    overflow: scroll;
    overflow-y: hidden;
    
    -ms-overflow-style: none;
    scrollbar-width: none;
}

#menu::-webkit-scrollbar {
    width: 0;
    height: 0;
}

#items {
    display: flex;
    padding: 0;
}

a {
    text-decoration: none;
    color: black;
    padding: 15px;
    display: block;
}

.s0, .s1 {
    display: block;
}

.s0 {
    opacity: 0.5;
    font-size: 83%;
}

<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <div id="menuwrap">
    <div id="menu">
      <div id="items">
        <a href="#"><span class="s0">Featured</span><span class="s1">Technology</span></a>
        <a href="#"><span class="s0">Featured</span><span class="s1">Technology</span></a>
        <a href="#"><span class="s0">Featured</span><span class="s1">Technology</span></a>
        <a href="#"><span class="s0">Featured</span><span class="s1">Technology</span></a>
        <a href="#"><span class="s0">Featured</span><span class="s1">Technology</span></a>
        <a href="#"><span class="s0">Featured</span><span class="s1">Technology</span></a>
        <a href="#"><span class="s0">Featured</span><span class="s1">Technology</span></a>
        <a href="#"><span class="s0">Featured</span><span class="s1">Technology</span></a>
        <a href="#"><span class="s0">Featured</span><span class="s1">Technology</span></a>
        <a href="#"><span class="s0">Featured</span><span class="s1">Technology</span></a>
        <a href="#"><span class="s0">Featured</span><span class="s1">Technology</span></a>
      </div>
    </div>
  </div>
</body>

</html>

Проверить можно при помощи панели разработчика в Chrome (F12 и Ctrl+Shift+M). К слову, этот полезный инструмент помогает изучить, как реализованы подобные решения.

БЛОГ НА HUSL

Как реализовать скролл в шапке сайта?

Ответы (1 шт):