Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

General Discussion

Alex Chow
Alex Chow
4,521 Points
Posted by Alex Chow
Alex Chow
4,521 Points

Hiding the Scrollbar

How can I hide the scrollbar without disabling it. I've tried the css property: "overflow-y: hidden;" however it completely disables the scrolling feature on macs. Is there a way around this? Thank you in advance.

1 Answer

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

I didn't invent this, but I found a trick online that involves 3 containers, with the inner and outer both the same fixed dimensions and the middle one having a vertical scroll bar that the outer one hides:

.inner-container, .outer-container {
  width: 200px;
  height: 400px;
}

.outer-container {
  position: relative;
  overflow: hidden;
}

.middle-container {
  position: absolute;
  overflow-y: scroll;
}

<div class="outer-container">
  <div class="middle-container">
    <div class="inner-container">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Integer vehicula quam nibh, eu tristique tellus dignissim
      quis. Integer condimentum ultrices elit ut mattis.
      Praesent rhoncus tortor metus, nec pellentesque enim
      mattis nec. Nulla vitae turpis ut dui consectetur
      pellentesque quis vel est. Curabitur rutrum, mauris ut
      mollis lobortis, sem est congue lectus, ut sodales nunc
      leo a libero. Cras quis sapien in mi fringilla tempus
      condimentum quis velit. Aliquam id aliquam arcu. Morbi
      tristique aliquam rutrum. Duis tincidunt, orci suscipit
      cursus molestie, purus nisi pharetra dui, tempor
      dignissim felis turpis in mi. Vivamus ullamcorper arcu
      sit amet mauris egestas egestas. Vestibulum turpis neque,
      condimentum a tincidunt quis, molestie vel justo. Sed
      molestie nunc dapibus arcu feugiat, ut sollicitudin metus
      sagittis. Aliquam a volutpat sem. Quisque id magna
      ultrices, lobortis dui eget, pretium libero. Curabitur
      aliquam in ante eu ultricies.
    </div>
  </div>
</div>
Alex Chow
Alex Chow
4,521 Points
Alex Chow
Alex Chow
4,521 Points

Great, thanks for the response. I will give this a try.