Список категорий с горизонтальным скролингом

Question

Вывожу список категорий, хочу сделать чтобы на ПК и мобильном, в одну строку с возможностью горизонтальной прокрутки. Только чтобы был скрыт скрол. Примерно так реализовано, на Цитрусе: ТЫк

    <div class="content-top">
		<div class="list-group">
           <a href="https://" class="list-group-item">Категория 1 (0)</a>
           <a href="https://" class="list-group-item active">Категория 2 (4)</a> 
           <a href="https://" class="list-group-item">Категория 3 (0)</a>
           <a href="https://" class="list-group-item">Категория 4 (0)</a>
        </div>
    </div>

.content-top {
 margin-bottom: 40px;
 overflow: hidden;
 height: 100px;
}
.list-group {
    white-space: nowrap;
    overflow-x: auto;
    padding-left: 0;
    margin-bottom: 20px;
}
.list-group a {
    padding: 35px 80px;
    height: 100px;
    float: left;
    width: 328px;
    position: relative;
    max-width: calc(25% - 14px);
    min-width: 210px;
    display: inline-block;
    vertical-align: top;
    margin-left: 18px;
    cursor: pointer;
    white-space: normal; 
	font-size: 24px;
	color: white;
}

Answer 1

Вот аналогичный пример, скролл есть, но он скрыт под overflow: hidden и для скрола рукой написан скрипт:

const slider = document.querySelector('ul');
let pressed = false,
  startX,
  scrollLeft;

slider.addEventListener('mousedown', e => {
  pressed = true;
  startX = e.pageX - slider.offsetLeft;
  scrollLeft = slider.scrollLeft;
});
document.documentElement.addEventListener('mouseleave', ()=>{
  pressed = false;
});
document.documentElement.addEventListener('mouseup', ()=>{
  pressed = false;
});
document.documentElement.addEventListener('mousemove', e => {
  if( !pressed ) return;
  e.preventDefault();
  let x = e.pageX - slider.offsetLeft;
  slider.scrollLeft = scrollLeft - x + startX;
});

nav {
  height: 60px;
  max-width: 800px;
  margin: 0 auto;
  overflow: hidden;
}

ul {
  box-sizing: border-box;
  width: 100%;
  overflow-x: auto;
  background-color: #ccc;
  padding: 10px 10px 30px;
  white-space: nowrap;
  list-style: none;
  font-size: 0;
  line-height: 0;
}

li {
  display: inline-block;
  box-sizing: border-box;
  padding: 10px;
  width: calc((100% - 30px) / 4);
  background-color: #4b7891;
  font-size: 14px;
  line-height: 20px;
}

li + li {
  margin-left: 10px;
}

<nav>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
  </ul>
</nav>

БЛОГ НА HUSL

Список категорий с горизонтальным скролингом

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