CSS/HTML scrolling text without scrollbars

Question

all!

I need to make effects with like on the picture. I can make text shading (transparent imgage on top and bottom of a text) but I have no idea how to make scrollable text without scrollbars and clipping (overflow: hidden). Have eny idea? enter image description here

I have only one idea - add image over scrollbar to hide it from users

Without a scrollbar, how is the user supposed to view the text that's below the fold? — Matt Ball
– Matt Ball, Commented Sep 22, 2011 at 13:30
The scroll bar has a purpose beyond its primary function - it provides a visual cue that there is text to be scrolled in. If you don't have one, don't be surprised if a lot of people miss out on the text below the fold altogether. — Andreas Eriksson
– Andreas Eriksson, Commented Sep 22, 2011 at 13:40

checkenginelight · Accepted Answer · 2011-09-22 13:48:09Z

6

Try this out:

<div id="container" style="width: 183px; height: 183px; overflow:
hidden; border: solid black 1px">
<div id="floating-div" style="width: 200px; height:200px; overflow:
auto">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
</div>
</div>

answered Sep 22, 2011 at 13:48

checkenginelight

1,17410 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

rossisdead Over a year ago

This would only work if you know that the scrollbar will be 17px or less in width. Depending on OS/application settings, the scrollbar could be wider.

Mori Over a year ago

@checkenginelight: Try your demo in Chrome/Safari: highlight/select a line and drag your mouse to the right and you'll see the scrollbar. Or use a textarea instead of the inner element and then fill it with some text. Then use the keyboard keys Page Up and Page Down.

Collectives™ on Stack Overflow

CSS/HTML scrolling text without scrollbars

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related