CODEWITHSUNDEEP
htmlcss
user979331
user979331

Reputation: 11841

CSS hide scroll bar, but have element scrollable

I have this element called items and the content inside the element is longer than the element height, I want to make it scrollable but hide the scroll bar, how would I do that?

<div class="left-side">
    <div
      class="items"
      style="display:block;width: 94%;margin: 0 auto;overflow: hidden;"
    >
    </div>
</div>

.left-side {
    height: 878px;
    padding-top: 20px;
    width: 1470px;
}

I tried setting the left-side class overflow to auto, but that didn't do anything.

Upvotes: 100

Views: 294604

Answers (10)

Bappa Banerjee
Bappa Banerjee

Reputation: 11

Just add this to your css and the job is done...

/* Hide scrollbar for Chrome, Safari and Opera */
body::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
body {
  overflow: -moz-scrollbars-none;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

Upvotes: 1

Kiloumap
Kiloumap

Reputation: 2233

You can hide it:

html {
  overflow:   scroll;
}

::-webkit-scrollbar {
    width: 0px;
    background: transparent; /* make scrollbar transparent */
}

For further information, see: Hide scroll bar, but while still being able to scroll

Upvotes: 189

Erik P_yan
Erik P_yan

Reputation: 788

if you use sass, you can try this

&::-webkit-scrollbar { 
  width: 0px;
  background: transparent; /* make scrollbar transparent */
}

Upvotes: 1

Rizwan
Rizwan

Reputation: 4433

You can hide it on specific div usig class:

<div class="hide-scroll"></div>

.hide-scroll{
    overflow: scroll;
}

.hide-scroll::-webkit-scrollbar {
    background: transparent; /* make scrollbar transparent */
    width: 0px;
}

Upvotes: 4

danielricecodes
danielricecodes

Reputation: 3586

I combined a couple of different answers in SO into the following snippet, which should work on all, if not most, modern browsers I believe. All you have to do is add the CSS class .disable-scrollbars onto the element you wish to apply this to.

.disable-scrollbars::-webkit-scrollbar {
  background: transparent; /* Chrome/Safari/Webkit */
  width: 0px;
}
    
.disable-scrollbars {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE 10+ */
}

And if you want to use SCSS/SASS:

.disable-scrollbars {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE 10+ */

  &::-webkit-scrollbar {
    background: transparent; /* Chrome/Safari/Webkit */
    width: 0px;
  }
}

Upvotes: 92

Isaac Hunter
Isaac Hunter

Reputation: 131

Hope this helps

/* Hide scrollbar for Chrome, Safari and Opera */
::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
html {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

Upvotes: 13

Chukwuemeka Maduekwe
Chukwuemeka Maduekwe

Reputation: 8526

work on all major browsers

html {
    overflow: scroll;
    overflow-x: hidden;
}
::-webkit-scrollbar {
    width: 0px;  /* Remove scrollbar space */
    background: transparent;  /* Optional: just make scrollbar invisible */
}

Upvotes: 4

hellomello
hellomello

Reputation: 8587

Similar to Kiloumap L'artélon's answer,

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

works too

Upvotes: 8

Sudipto
Sudipto

Reputation: 440

You can make use of the SlimScroll plugin to make a div scrollable even if it is set to overflow: hidden;(i.e. scrollbar hidden).

You can also control touch scroll as well as the scroll speed using this plugin.

Hope this helps :)

Upvotes: 1

Yvonne Aburrow
Yvonne Aburrow

Reputation: 2728

if you really want to get rid of the scrollbar, split the information up into two separate pages.

Usability guidelines on scrollbars by Jakob Nielsen:

There are five essential usability guidelines for scrolling and scrollbars:

  • Offer a scrollbar if an area has scrolling content. Don't rely on auto-scrolling or on dragging, which people might not notice.
  • Hide scrollbars if all content is visible. If people see a scrollbar, they assume there's additional content and will be frustrated if they can't scroll.
  • Comply with GUI standards and use scrollbars that look like scrollbars.
  • Avoid horizontal scrolling on Web pages and minimize it elsewhere.
  • Display all important information above the fold. Users often decide whether to stay or leave based on what they can see without scrolling. Plus they only allocate 20% of their attention below the fold.

To make your scrollbar only visible when it is needed (i.e. when there is content to scroll down to), use overflow: auto.

Upvotes: 0

Related Questions