Scroll Without a Scrollbar

Hide scroll bar, but while still being able to scroll

Just a test which is working fine.

#parent{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#child{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
    box-sizing: content-box; /* So the width will be 100% + 17px */
}

Working Fiddle

JavaScript:

Since the scrollbar width differs in different browsers, it is better to handle it with JavaScript. If you do Element.offsetWidth - Element.clientWidth, the exact scrollbar width will show up.

JavaScript Working Fiddle

Or

Using Position: absolute,

#parent{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

#child{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: -17px; /* Increase/Decrease this value for cross-browser compatibility */
    overflow-y: scroll;
}

Working Fiddle

JavaScript Working Fiddle

Information:

Based on this answer, I created a simple scroll plugin.

CSS hide scroll bar, but have element scrollable

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

Scroll content without scrollbar using CSS

You could kinda hack it cross-browser by expanding the width of the nav element and force scrollbars. Updated JSFiddle.

nav {
    position:relative;
    height:100%;
    width: 110%;         /*  <----   */
    overflow-x:hidden;
    overflow-y:scroll;   /*  <----   */
}

Of course, you'll want to adjust the percentage to your needs or use calc( 100% + 15px ).

How to scroll a Div without a scroll bar?

Please don't do this! It will make the interface unusable because no one will no where the can scroll!

But if you must...

How to Hide Your Scrollbars

jsFiddle Example

CSS

#wrapper {
    width: 150px;
    overflow: hidden;
    outline: 1px solid blue;
}

#scroller {
    width: 170px;
    height: 100px;
    overflow: auto;
    background: yellow;
}

HTML

<div id="wrapper">
    <div id="scroller">
        foo<br>bar<br>baz<br>foo<br>bar<br>baz<br>foo<br>bar<br>baz<br>
        foo<br>bar<br>baz<br>foo<br>bar<br>baz<br>foo<br>bar<br>baz<br>
        foo<br>bar<br>baz<br>foo<br>bar<br>baz<br>foo<br>bar<br>baz<br>      
    </div>
</div>

Allow scroll but hide scrollbar

It's better, if you use two div containers in HTML .

As Shown Below:

HTML:

<div id="container1">
    <div id="container2">
        // Content here
    </div>
</div>

CSS:

 #container1{
    height: 100%;
    width: 100%;
    overflow: hidden;
}

 #container2{
    height: 100%;
    width: 100%;
    overflow: auto;
    padding-right: 20px;
}

Scroll without a scrollbar

Hacky but seems to work...

Using ::after pseudoelement

#parent {width:302px; overflow:hidden; position: relative;}
textarea {width:300px; height:100px; overflow-x:hidden; overflow-y:scroll;}
textarea:focus {
    outline-offset: 0;
    outline-style: none;
}

#parent::after {
    position: absolute;
    width: 17px;
    top: 0;
    right: 0px;
    height: 102px;
    border-left:1px solid red;
    background-color: black;
    content: "";
    display: block;   
}

http://jsfiddle.net/tarabyte/snTaP/3/

OR using additional div

HTML:

<div id="parent">
  <textarea id="entry_3"></textarea>
  <div id="hidescroll"></div>
</div>

CSS:

#parent {width:302px; overflow:hidden; position: relative;}
textarea {width:300px; height:100px; overflow-x:hidden; overflow-y:scroll;}
textarea:focus {
    outline-offset: 0;
    outline-style: none;
}
#hidescroll {
    position: absolute;
    width: 17px;
    top: 0;
    right: 0;
    z-index: 1000;
    height: 102px;
    border-left:1px solid red;
    background-color: black;
}

http://jsfiddle.net/tarabyte/snTaP/2/

How to create scrollable element in Tailwind without a scrollbar

To hide the scrollbar you'll need to style it directly:

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

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

You could easily add these as Tailwind utilities using a plugin in your config: https://tailwindcss.com/docs/plugins#adding-utilities

---

Further reading:

https://css-tricks.com/almanac/properties/s/scrollbar/
https://www.w3schools.com/howto/howto_css_hide_scrollbars.asp

---

Related Topics