0

I have a div of text that I wish to be able to scroll through without showing the vertical scroll bar. I have followed this but to no avail, the text scrolls however the scroll bar is still visible. Hide scroll bar, but while still being able to scroll

#activity_parent {
      height: 100%;
      width: 100%; 
      overflow: hidden;
    }
    
    #activity_child {
      width: 100%;
      height: 100%;
      overflow-y: scroll;
      padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
    }
        <div id="activity_parent">
          <div id="activity_child">
            hello<br/>I<br/>am<br/>here<br/>
            hello<br/>I<br/>am<br/>here<br/>
            hello<br/>I<br/>am<br/>here<br/>
            hello<br/>I<br/>am<br/>here<br/>
            hello<br/>I<br/>am<br/>here<br/>
            hello<br/>I<br/>am<br/>here<br/>
            hello<br/>I<br/>am<br/>here<br/>
            hello<br/>I<br/>am<br/>here<br/>
            hello<br/>I<br/>am<br/>here<br/>
            hello<br/>I<br/>am<br/>here<br/>
            hello<br/>I<br/>am<br/>here<br/>
            hello<br/>I<br/>am<br/>here<br/>
            hello<br/>I<br/>am<br/>here<br/>
            hello<br/>I<br/>am<br/>here<br/>
            hello<br/>I<br/>am<br/>here<br/>
            hello<br/>I<br/>am<br/>here<br/>
            hello<br/>I<br/>am<br/>here<br/>
            hello<br/>I<br/>am<br/>here<br/>
            hello<br/>I<br/>am<br/>here<br/>
            hello<br/>I<br/>am<br/>here<br/>
            hello<br/>I<br/>am<br/>here<br/>
            hello<br/>I<br/>am<br/>here<br/>
            hello<br/>I<br/>am<br/>here<br/>
            hello<br/>I<br/>am<br/>here<br/>
            hello<br/>I<br/>am<br/>here<br/>
            hello<br/>I<br/>am<br/>here<br/>
            hello<br/>I<br/>am<br/>here<br/>
            hello<br/>I<br/>am<br/>here<br/>
            hello<br/>I<br/>am<br/>here<br/>
            hello<br/>I<br/>am<br/>here<br/>
            hello<br/>I<br/>am<br/>here<br/>
            good<br/>bye.
          </div>
        </div>
ppwater
  • 2,315
  • 4
  • 15
  • 29
Dercni
  • 1,216
  • 3
  • 18
  • 38
  • That is because you are using `height; 100%` on the parent element, which means it will expand to accommodate the full height of the content inside of it. You will need to declare a value that is **not** dependent on content height: be it `25%`, a viewport unit, a fixed pixel/em/rem/pt value. If you, say, set the parent height to 200px, you will see it working. – Terry Aug 26 '17 at 23:42
  • Hi Terry, using 50% still shows the scroll bar. Why does this work with height: 100% ? http://jsfiddle.net/5GCsJ/954/ – Dercni Aug 26 '17 at 23:52

2 Answers2

1

What browser are you working with because after testing your code, the vertical scroll bar is not showing here.

Better still place the CSS within a style tag as shown below

 <html>
    <style>
    #activity_parent {
    height: 100%;
    width: 100%; 
    overflow: hidden;
    }

    #activity_child {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-right: 17px; /* Increase/decrease this value for cross-browser 
    compatibility */
    }
    </style>
    <body>
    <div id="activity_parent">
      <div id="activity_child">
    <!-- you content goes here -->
        hello<br/>I<br/>am<br/>here<br/>
        hello<br/>I<br/>am<br/>here<br/>
        hello<br/>I<br/>am<br/>here<br/>
        hello<br/>I<br/>am<br/>here<br/>
        hello<br/>I<br/>am<br/>here<br/>
        hello<br/>I<br/>am<br/>here<br/>
        hello<br/>I<br/>am<br/>here<br/>
        hello<br/>I<br/>am<br/>here<br/>
        hello<br/>I<br/>am<br/>here<br/>
        good<br/>bye.
      </div>
      </div>
      </body>
    </html>
dfemo
  • 7
  • 2
  • Thanks Terry, as a standalone file it works :) In my rails app the same HTML without the inline styles still shows the vertical scroll bar. I have checked and the same css is being applied to the divs however there is other css there too so something must be conflicting. – Dercni Aug 27 '17 at 00:17
  • OK, looks like the offending css is "box-sizing: border-box;" being applied to both the parent and child divs. I have no idea where this is coming from however when I uncheck it the scroll bar goes. – Dercni Aug 27 '17 at 00:21
0

you can use Web-kit Css, just set "width: 0px" and u stil will be able to scroll.

::-webkit-scrollbar {
  background-color: #042654;
  width: 0px;
}
::-webkit-scrollbar-track {
  background-color: #bebebe;
  border-radius: 0px;
}
::-webkit-scrollbar-thumb {
  background-color: #8192A9;
  border-radius: 0px;
}
JulienQHN
  • 43
  • 5