Hide horizontal scrolling bar, But keep scrolling feature

Question

I have a container with some text that has specific width (Less than the content), I want to add horizontal scrolling, But the scroll bar should be hidden.

Here is a fiddle of what I tried: https://jsfiddle.net/ehp3qnty/576/

.parent {
  width: 400px;
  height: 200px;
  border: 1px solid #aaa;
  overflow: hidden;
}

.child {
  height: 100%;
  margin-bottom: -50px;
  /* maximum width of scrollbar */
  padding-bottom: 50px;
  /* maximum width of scrollbar */
  overflow-y: hidden;
  overflow-x: scroll;
}

p {
  white-space: nowrap;
}

<div class="parent">
  <div class="child">
    <p>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
      sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
      rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      At vero eos et accusam et justo duo dolores et ea rebum.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
      sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
      rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      At vero eos et accusam et justo duo dolores et ea rebum.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
      sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
      rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      At vero eos et accusam et justo duo dolores et ea rebum.
    </p>
  </div>
  <!-- .child -->
</div>
<!-- .parent -->

But I can't scroll on mobile by swiping right and left or on desktop, Also wheel is not working.

So how to hide the horizontal bar but keep these features?

The solution should be compatible with most of the browsers and without using any libraries, Just pure CSS/JS.

score 1 · Answer 1 · answered Nov 12 '18 at 17:11

1

css code will help you

              .parent {
               width: 400px;
               height: 200px;
               border: 1px solid #aaa;
               overflow:auto;
               overflow-y: hidden;
                  }

              .child {
                height: 100%;
                margin-bottom: -50px;
                /* maximum width of scrollbar */
                   padding-bottom: 50px;
                 /* maximum width of scrollbar */

                    }

                    p {
                   white-space: nowrap;
                     }

answered Nov 12 '18 at 17:11

Anil kumar H J

194
8

+1 because this answers the question very well, but it is important to remember a lot of people do not intuitively know to press and hold the middle mouse button to side scroll. Thus my UI/UX comment to Jesus. – Nosajimiki Nov 12 '18 at 17:14
DO you know how to slow down the scrolling? – Nov 12 '18 at 18:23
Poor formatting, very little description as to whats happening in your code, and I disagree with using a 'hacky' code `margin-bottom: -50px;` – A Friend Nov 12 '18 at 22:26

A Friend · Answer 2 · 2018-11-12T17:12:06.083

0

You can use this to change the css of the scrollbar :)

/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1; 
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555; 
}

What you probably want to do is something like so:

.child::-webkit-scrollbar {
    height: 10px;
}

Or (to make it super unobtrusive without completely hiding it):

.child::-webkit-scrollbar {
    height: 1px;
}

EDIT: Your JSFiddle Example also works fine on my browser (Google chrome on MacOSX) and on my mobile Safari, Iphone X (latest version)

edited Nov 12 '18 at 17:12

answered Nov 12 '18 at 16:59

A Friend

1,420
17
22

that should be height for a horizontal scrollbar – Nosajimiki Nov 12 '18 at 17:02
Also, removing the scrollbar entirely from scrollable content is a pretty major UI/UX taboo. Providing cross platform compatibility without them becomes an issue, unless you do some fancy JavaScript to support click-and-drag. So just as a suggestion if you are only looking for making the scrolling less intrusive, try something like the above CSS but at a height of 5px instead of totally hiding it. – Nosajimiki Nov 12 '18 at 17:10
@Nosajimiki I'd argue it depends on the situation. Sometimes I'd say you can get away with definitely not having one. – A Friend Nov 12 '18 at 17:16
I completely agree, and his may be such a case. I only put that comment out there because many times when people say they don't want a scrollbar, they are really saying, the scrollbar is ugly and taking up too much space. The decision to remove one should always be weighed against the end user's likelyhood to know to interact with it by other means. – Nosajimiki Nov 12 '18 at 17:44
Do you know how to slow down the scrolling? – Nov 12 '18 at 18:31
@Nosajimiki Ah I see what you're saying now. I think that's a fair comment. Thanks for your input :) – A Friend Nov 12 '18 at 22:26
@maxwell Not quite sure what you mean? Could you explain? If you're quite bothered about all of this scrollbar business I would considering looking into a js alternative, it will allow for a more consistent experience across browsers and will give you more customization options. This might help with scroll speed but it's js only: https://stackoverflow.com/a/26386218/3722330 – A Friend Nov 12 '18 at 22:29
@Jesus, I mean to make the scrollbar moving slower on scrolling, I viewed this answer before, It contains Jquery code – Nov 12 '18 at 22:43
@maxwell unfortunately it's going to have to be done in atleast javascript. There's no pure HTML and CSS way of doing it. You'll either need to do it in javascript or jquery, the jquery way will be a lot easier. You may want to look into the following https://nicescroll.areaaperta.com/, https://stackoverflow.com/questions/17227162/change-scroll-speed-of-specific-element. I'd also appreciate if you marked this as the correct answer if my code/comments were useful :) – A Friend Nov 12 '18 at 23:20

score 0 · Answer 3 · answered Nov 12 '18 at 17:09

0

For your use-case, use:

.child::-webkit-scrollbar {
    height: 10px;
}

answered Nov 12 '18 at 17:09

Riley Steele Parsons

335
1
6

Hide horizontal scrolling bar, But keep scrolling feature

3 Answers3