Scrolling text box

(Karl) #1


I have a text box with overflowing text. I’ve set the overflow in the Metric panel to ‘Scrollbars’ and the text scrolls as it should with the excess hidden. All good. But…

I don’t see scroll bars unless I’m actually in the act of scrolling. This in itself is a good thing as it keeps the layout clean. But it does mean that here is no indication for the user that there is overflow text so they might miss this and move on without reading everything on offer. So, I would like to place a small arrow top and bottom at the side of the text box to give a visual clue that there is a scroll and, as well as being able to scroll the text when the mouse is over the text box itself, have the text scroll up and down when you hold the mouse down on either of the arrows.

This is probably quite simple but it’s stumping me!

The page in question is here…

Go to the ‘Burgers’ tab to see the scrolling text. Note that the site is still under construction so there are still lose ends and things that don’t work as they should, in particular, page sizes on different devices.

(Mark Hunte) #2

This is really down to the preferences of the operating system. Which means each use may have it set differently.

But found this on stakoveflow that looks like it works.


::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);


(Karl) #3

Thanks for the reply.

That’s interesting and, though it’s not an ‘out of the box’ solution gives me something to work with.