Help Thin Scrollbar with Div Box

[Lexielai]

Hey all!

I've managed to cobble together a (barely) working way to create thin scrollbars with div boxes rather than with bg! However it tends to be very fussy and requires a lot of adjustments each time it's used. It's also incompatible with mobile in this version of it.

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"

[div=position: relative; transform: scale(0.5, 1); overflow: auto; width: 50%; height: 400px; margin: 0px 0px 0px -8em;][div=background-color: Pink; width: 50%; height: 1000px; position: relative; transform: scale(2, 1); margin: auto][div=margin: 10px; text-align: justify]"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."[/div][/div][/div]

It's not as modifiable or clean as I'd like it to be though. The current version uses nested divs, with the outer applying the scroll, the middle readjusting the size, and the inner for text edits. Any suggestions on how to improve this?

 

[IctoraPost]

Here's a version of it that's a bit simpler. It only uses two divs and doesn't need any transforms. It works by making the inner div's width slightly more than the outer div's, which cuts the bar off. Since the bar is 17px wide, an extra 17px to the width would cut it off completely, while something less than that will leave a small scrollbar. The arrows won't be there, though, and it still suffers from being mobile unfriendly.

Duis convallis rhoncus tellus in porta. Phasellus vitae nisl venenatis, ullamcorper tortor a, pulvinar erat. Sed commodo sollicitudin sapien, non hendrerit mi vehicula commodo. Vivamus eleifend egestas tempus. Vivamus ultrices faucibus nisi, et pellentesque velit posuere mattis. In hac habitasse platea dictumst. Pellentesque ut posuere erat. Donec tristique leo sem, id commodo sem maximus in. Mauris congue cursus nisi, eu luctus ligula mollis eu. Pellentesque ac augue eu ligula ullamcorper lacinia dictum non lectus. Nunc ac sem lorem.

Maecenas fringilla justo sit amet tortor placerat pulvinar nec tempus magna. Aliquam consectetur pretium faucibus. Mauris convallis, tortor vel ullamcorper gravida, lectus ligula accumsan neque, quis varius eros felis in ex. Ut dictum nunc massa, quis accumsan nulla feugiat sed. Nullam vel erat vitae urna mattis interdum. Integer non ultricies erat. Suspendisse mattis pellentesque venenatis. Mauris auctor est pulvinar, euismod dolor eu, convallis libero.

[div=width: 300px; height: 300px; overflow: hidden; background: #f1f1f1;][div=
width: calc(100% + 13px); height: calc(100% + 17px); overflow: scroll; box-sizing: border-box; padding: 3% 7%; text-align: justify;]Duis convallis rhoncus tellus in porta. Phasellus vitae nisl venenatis, ullamcorper tortor a, pulvinar erat. Sed commodo sollicitudin sapien, non hendrerit mi vehicula commodo. Vivamus eleifend egestas tempus. Vivamus ultrices faucibus nisi, et pellentesque velit posuere mattis. In hac habitasse platea dictumst. Pellentesque ut posuere erat. Donec tristique leo sem, id commodo sem maximus in. Mauris congue cursus nisi, eu luctus ligula mollis eu. Pellentesque ac augue eu ligula ullamcorper lacinia dictum non lectus. Nunc ac sem lorem.

Maecenas fringilla justo sit amet tortor placerat pulvinar nec tempus magna. Aliquam consectetur pretium faucibus. Mauris convallis, tortor vel ullamcorper gravida, lectus ligula accumsan neque, quis varius eros felis in ex. Ut dictum nunc massa, quis accumsan nulla feugiat sed. Nullam vel erat vitae urna mattis interdum. Integer non ultricies erat. Suspendisse mattis pellentesque venenatis. Mauris auctor est pulvinar, euismod dolor eu, convallis libero.[/div][/div]

Update: A better version can be found here.

 

[Lexielai]

Hmm, that's a clever way to do it. If you don't mind, could you explain how the "overflow: auto" in the outer div and the "overflow: scroll" inside the inner div interact? Or is only one necessary?

 

[IctoraPost]

It's an "overflow: hidden" on the outer div, which cuts off anything that goes out of it. I used scroll in the inner div instead of auto so that it won't break if you don't put in enough content for it to scroll.

 

[Lexielai]

Woops, wrote it in wrong

I see, so does the "overflow: hidden" bound the inner div's larger size from escaping the outer div's borders?

 

[IctoraPost]

Yep.

no overflow

overflow: hidden

 

[Lexielai]

Got it, thanks

 

[Lyro]

Just remember that scrollbars don't look the same across all browsers. On Microsoft's Edge browser*, for example, the scroll bar is completely invisible with that second trick, because the scroll bar is slightly thinner.

* This does not constitute in any way, shape or form an endorsement of Edge.

 

[Lekiel]

*3* just here to learn all these wonderful magicks. I sorry I in the way... please.. much amazing this..! I want to be better! Sempai..

 

[zooka]

I love this trick. It's amazing.