Скрыть вертикальную полосу прокрутки, держать горизонтальный и все еще в состоянии прокручивать

Question

Я пытаюсь написать HTML / CSS таким образом, чтобы у меня был div, который можно прокручивать как вертикально, так и горизонтально, но ТОЛЬКО горизонтальная полоса прокрутки видна. Таким образом, вертикальная прокрутка выполняется с помощью колесика мыши, а горизонтальная - с помощью полосы прокрутки внизу (и других обычных контролей, таких как клавиатура и т. Д. c.). Обычно предлагаемое решение с отображением -webkit-scrollbar none не применимо, потому что оно может скрыть только обе полосы прокрутки, отсюда и новый вопрос.

Так что, в принципе, мне нужно такое поведение, кроме горизонтальной полосы прокрутки. все еще там:

.content {
  width:400px;
  height:200px;
}

.container {
  overflow-x: auto;
  overflow-y: auto;
  height: 100px;
  width: 200px;
}

.container::-webkit-scrollbar {
  display: none;
}

<div class="container">
  <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

Answer 1

Вы можете использовать -webkit-scrollbar, но вам нужно использовать width и height вместо display: none

div {
  width: 100px;
  height: 100px;
  font-size: 48px;
  
  overflow: auto;
}

::-webkit-scrollbar {
  height: 0px;
  width: 8px;
  border: 1px solid #fff;
}

::-webkit-scrollbar-track {
  border-radius: 0;
  background: #eeeeee;
}

::-webkit-scrollbar-thumb {
  border-radius: 0;
  background: #b0b0b0;
}

<div>
Lorem ipsum dolor sit amet.
</div>

Shift scroll to move horizontally

width будет влиять только на вертикальную прокрутку, в то время как height будет влиять только на горизонтальную прокрутку. Если вы установите height: 0px, он будет скрывать горизонтальную полосу прокрутки, но держать вертикальную.