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 trialAlex Chow
4,521 PointsHiding 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
231,236 PointsI 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
4,521 PointsAlex Chow
4,521 PointsGreat, thanks for the response. I will give this a try.