jquery – Hide ScrollBar from overflowed div: auto


I have a .content div that groups all the site's content with the following css:

margin: 15px 12px;
background: #fff;
padding: 20px;
height: calc(100vh - 30px);
overflow: auto;

My body has a different background: #222 , to simulate an edge. It's 100% functional, however I want to remove that sidebar on the side of the main div. If I put an overflow: hidden; in my .content , Scroll disappears, along with the ability to scroll the page. Any jQuery or even pure CSS solution (that works outside of Chrome too)?


On StackOverflow in English answered a similar question, which I believe solves your problem: https://stackoverflow.com/a/20447620/6762369

.div {
    background-color: red;
    position: relative;
    height: 214px;
    overflow: hidden;
    width: 452px;
    margin: 0px auto;
    width: 100%;
    overflow: auto;
    height: 100%;
    padding-right: 15px;

In this question they left an example in fiddle: http://jsfiddle.net/sp95S/1/

Scroll to Top