Hide HTML Horizontal But Not Vertical Scrollbar

Hide vertical scrollbar, keep horizontal and still able to scroll

You can use -webkit-scrollbar, but you need to use width and height instead of 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

Hide html horizontal but not vertical scrollbar

You can use css like this:

overflow-y: scroll;
overflow-x: hidden;

How do I hide horizontal scroll bar and keep vertical scroll bar visible while still being able to scroll horizontally?

Try this:

.section {
  overflow-x: scroll;
  scrollbar-width: none;
  overflow-y: auto;
}

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

How to hide vertical scrollbar without hiding horizontal scrollbar and still be able to scroll?

Customizing scrollbars is a cross-browser compatibility problem as Firefox limits you a lot.

For WebKit browsers you can set the width and height on scrollbars!

::-webkit-scrollbar
{
  width: 0;
  height: 8px;
}

This hides the vertical scrollbar but keeps the horizontal. It also removes default scrollbar style, so it needs to be corrected.

::-webkit-scrollbar
{
  width: 0;
  height: 1.2rem;
}

::-webkit-scrollbar-track
{
  background: white;
}

::-webkit-scrollbar-thumb
{
  background: hsl(0, 0%, 60%);
}

body
{
  width: 1500px;
  height: 1000px;
  background: url('https://random.imagecdn.app/1920/1080');
}

Hiding horizontal scroll bar while keeping it active and keeping the vertical one

.wrap {
  width: 100%;
  height: 100%;
  overflow-x: scroll;
}

.inner {
  width: 200%;
}

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

<div class="wrap">
  <div class="inner">
  </div>
</div>

HTML and enable div's horizontal scrolling but hide the horizontal scrollbar

There's a similar question Hide scroll bar, but still being able to scroll, but I believe your question is focused on the horizontal scrollbar. In that other question, I found something that can help you, this answer. Jean posted that answer where he puts margin-bottom: -17px; in the container's child to hide the scrollbar.I did a simple jsFiddle to ilustrate his technique. It's a hack to hide the scrollbar, I didn't check if this work on all major browses but it works on chrome and firefox.