Как скрыть полосу прокрутки блока и сделать возможность прокрутки блока курсором мыши?

Есть стандартный блок фиксированной ширины, внутри которого блок бОльшей ширины. Как можно скрыть полосу прокрутки внизу внешнего блока и сделать возможность прокрутки зажатым курсором мыши?

Пример: https://recordit.co/4iF6b0cLQv

CSS:

.wrapper {
    width: 300px;
    background: #000;
    overflow-x: scroll;
}
.inner {
    width: 500px;
    background: #ccc;
}

HTML:

<div class="wrapper">
    <div class="inner">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Molestiae ut veritatis dolorum distinctio labore aspernatur illo voluptatum reiciendis ipsam nostrum asperiores esse sint non et accusantium, amet quasi sapiente laudantium.</div>
</div>

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

Автор решения: BlackStar1991

Можно сделать такой фокус

.wrapper {
  background: #000;
  height: 200px;
  width: 300px;
  overflow: hidden;
}

.inner {
  background: #ccc;
  display: flex;
  justify-content: space-between;
  height: 220px;
  width: 300px;
  overflow-x: auto;
  overflow-y: hidden;
}

.inner>div {
  margin-left: 10px;
}
<div class="wrapper">
  <div class="inner">
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae incidunt, dignissimos fuga, ab aut cumque molestiae iste repellat culpa maiores cum est, totam quam placeat sapiente voluptatibus reprehenderit eligendi maxime.</div>
    <div>Similique ratione aperiam excepturi nulla maiores consequuntur quaerat dolorem enim, id minus porro fuga non sequi consectetur pariatur commodi beatae esse nisi eligendi veniam delectus placeat deserunt totam? Aperiam, dolor.</div>
    <div>Assumenda, vitae, maxime! Omnis beatae, perferendis adipisci qui et, nobis illo nesciunt excepturi, molestiae itaque voluptatem dolor saepe. Architecto cumque libero facilis sit nostrum, saepe voluptatem adipisci maiores tenetur ipsa.</div>
    <div>At eveniet itaque fugiat aut debitis numquam nostrum commodi aliquid hic sequi aperiam tempora optio quasi deserunt, eaque velit voluptatum quibusdam ad delectus id voluptas! Dolorem obcaecati rem, ipsam ea.</div>
    <div>Culpa, tempore. Eveniet unde, excepturi quia ab doloremque earum maiores doloribus, tenetur ex, eius, repellat voluptatum quod porro modi. Saepe nostrum illum blanditiis consequuntur, atque fugiat rerum quia sint labore.</div>
    <div>Eius illo sapiente deserunt accusamus doloribus aliquid debitis veniam consequatur soluta, perferendis! Laudantium assumenda officia animi placeat, vitae, odit. Quasi in amet labore quos magnam iste ullam et accusantium adipisci.</div>
    <div>Animi nemo iste, molestias facilis, officia velit voluptatem pariatur, quo esse distinctio cumque. Accusantium animi repudiandae debitis, vero id expedita a nobis, nisi, placeat maxime illo nemo tenetur ducimus aspernatur.</div>
    <div>Molestias laboriosam ipsam iure, odit quam nesciunt, minus quis. Laudantium, a, deserunt. Accusantium ab, debitis iusto perferendis voluptate odio! Nam ad ex inventore minima dolores nihil in voluptate quas quos.</div>
    <div>At reprehenderit officiis facilis quidem unde provident sit dolore minima natus, dicta maiores, doloribus quam, sed animi quae harum error fugit eos, iste mollitia cumque molestias. Debitis expedita, repellendus porro.</div>
    <div>Voluptatibus error eaque est nesciunt atque enim odio quia quasi natus delectus autem eos commodi adipisci reiciendis saepe provident totam rerum, doloremque possimus, unde ea molestias. Cum est quos, mollitia!</div>
    <div>Ducimus consequatur rerum quaerat distinctio placeat maiores, tenetur dolorum ea culpa eaque iure enim fugiat, officiis deserunt facilis necessitatibus quibusdam voluptas, ab consequuntur. Consequatur obcaecati repudiandae quam optio cupiditate fuga.</div>
    <div>Laboriosam suscipit tempora nesciunt magni, illo veritatis tenetur assumenda nobis expedita obcaecati a. Laborum facere beatae labore iste, ut incidunt numquam! At saepe exercitationem ipsam, qui soluta cum distinctio vel.</div>
    <div>Obcaecati sint voluptatibus vitae asperiores, ad dicta delectus nesciunt cum maxime, reiciendis error tenetur animi atque voluptas excepturi dolor laborum! In quam error possimus, officia, quis maiores ullam accusamus cumque.</div>
    <div>Ab repellat praesentium voluptatibus eligendi, nihil similique mollitia natus laborum voluptate, commodi illo quaerat iusto pariatur adipisci, suscipit debitis dolore animi officia. Debitis enim est distinctio omnis quo iure, error.</div>
    <div>Id natus ratione veritatis magnam soluta architecto, fuga eos tempore, eum tempora animi eaque, aliquam perferendis odit quis. Obcaecati voluptate illum, sapiente quas quasi consequatur, molestiae numquam quod sit iure!</div>
    <div>Magnam voluptas nemo in blanditiis, voluptatibus corporis laboriosam inventore esse exercitationem maiores earum delectus cum dicta, voluptates, soluta. Odit aut, unde voluptatum vel. Pariatur incidunt illo, doloremque, nostrum cumque quae?</div>
    <div>Minima nobis voluptatibus accusantium provident voluptate enim, quasi amet praesentium numquam autem minus ab sequi, blanditiis ipsam consectetur, quo repellat! Quos, maxime, ex. Fugiat fugit doloremque praesentium dolorem, nulla cumque.</div>
    <div>Eos officia nostrum quaerat, illum nihil doloremque delectus consequuntur atque quod rerum cumque, quae voluptatem obcaecati repellat quos ducimus dicta voluptate sint vero molestias voluptas. Quasi accusamus ad mollitia at!</div>
    <div>Ab ipsum cum voluptate sit nesciunt rerum aut accusantium et, assumenda aspernatur. Nesciunt fuga sunt adipisci nemo amet qui ea placeat, consequatur maiores excepturi reiciendis minima, asperiores voluptatibus, esse magnam!</div>
    <div>Blanditiis recusandae corrupti magnam molestiae. Reprehenderit voluptatem officia dolorem dolor voluptas tempore molestias consequuntur, nulla odio culpa iure fugiat illo porro facere nesciunt sit labore ad magni, corporis dolorum! Expedita!</div>
    <div>Alias maiores odit voluptatum commodi ipsum, cumque obcaecati nam voluptas vitae ipsa, exercitationem sint deleniti libero, blanditiis quasi. Harum totam laborum neque eius eos, architecto qui odit similique nostrum at.</div>
    <div>Culpa magni modi quis ea quae officiis odit, laborum debitis eveniet maiores, dolore impedit voluptatibus quo autem iste, recusandae rem labore fuga unde aliquam. Doloribus officiis quisquam quam reiciendis, beatae!</div>
    <div>Harum suscipit recusandae doloribus cupiditate similique itaque, nesciunt saepe laborum voluptatibus. Maxime quis voluptatem recusandae labore alias eius nam. Eius ducimus odio aliquam repudiandae voluptas nam consequatur atque, recusandae beatae.</div>
    <div>Voluptate delectus debitis, laudantium veritatis necessitatibus distinctio explicabo laborum quo ad est, eligendi ullam error neque atque odio dolor possimus quae cum commodi sapiente mollitia et, iure rem. Sunt, repellat.</div>
    <div>Ut quibusdam delectus omnis, nam sequi debitis non esse laboriosam quo illum temporibus cum sint facere, impedit aliquam. Eius voluptatem accusantium doloremque repellendus nostrum eaque fugiat totam officia laboriosam saepe!</div>
    <div>Maxime ratione ipsam possimus placeat earum cum obcaecati quasi optio fuga quae voluptatem, quis eveniet expedita, ipsa nesciunt aut delectus rem architecto. Mollitia et rerum, praesentium, nesciunt eos nisi. Nam?</div>
    <div>Saepe eligendi iusto quam repellendus asperiores architecto ipsa, doloribus aut provident cum tempore deleniti placeat. Ipsa quisquam cupiditate sint illo, ipsum nostrum. Impedit esse provident, velit eveniet eum ullam laborum!</div>
    <div>At fugit dolor, iusto corrupti possimus quae debitis quos cumque recusandae velit ipsum impedit beatae accusantium maiores, harum cum aliquid voluptatibus consectetur repudiandae nostrum! Doloremque recusandae quibusdam ipsam at vitae.</div>
    <div>Voluptatibus perferendis sed quasi velit aspernatur aliquam, porro adipisci nihil commodi iusto veritatis culpa alias expedita provident reiciendis fugiat architecto optio laborum molestiae quisquam dolor? Obcaecati blanditiis deserunt enim ex.</div>
    <div>Amet aspernatur odit tenetur quam cupiditate, totam neque eaque corporis rem blanditiis, dicta aliquam sunt expedita ut non doloribus adipisci voluptates id. Optio, culpa expedita laudantium fugit dicta? Unde, eligendi!</div>
  </div>
</div>

Делаем высоту оборачиваемого блока больше высоты родителя на значения высоты скролл бара. Но поскольку у родителя стоит overflow: hidden; мы этот скроллбар не видим. Тестировал только в Chrome возможно в других браузерах надо ставить другие размеры а не +20рх. Теперь зажав на клавиатуре кнопку Shift мы можем прокручивать псевдо блоки по горизонтали скроллом мышки. Ну или у вас моднявая геймерская, то там бывают горизонтальные колесики.

*Если это коммерческий проект лучше таким извращением не заниматься и пользоваться слайдерами которые отлеживают позиционирование объектов на JS.

→ Ссылка