Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

General Discussion

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
216,016 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

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