CODEWITHSUNDEEP
htmlcss
sawa
sawa

Reputation: 168101

Scrollable but no scroll bar

How can I let a DOM object such as div be able to scroll with scroll wheel on the mouse or by the arrow keys (like overflow:scroll), but not show the scroll bar (like overflow:hidden)?

Upvotes: 15

Views: 7763

Answers (3)

user3555376
user3555376

Reputation: 1

if may need this to stop scroll down when you reach the top:

var top_val = $("#inner").css("top");
if (top_val.indexOf("-") > -1)
{
    $("#inner").css("top", parseInt($("#inner").css("top"), 10) + 5 + "px");  
}

Upvotes: 0

Matt Fellows
Matt Fellows

Reputation: 6522

You could set bind an event listener to scrolldown / scrollup (via the mousewheel event, looking at event.wheelDelta to calc size and directino of scroll) and manually position an absoluteley positioned div inside another fixed height absolutely / relatively positioned div. So on scroll down you decrease the y position of the inner div, and on scroll up you increase the y position.

For arrow keys, just bind a similar function to keydown event checking for the down / up arrow as appropriate.

I made a jsfiddle exampling this technique here: http://jsfiddle.net/wsmithrill/U7ju8/32/

Upvotes: 5

chipcullen
chipcullen

Reputation: 6960

If you want to skip javascript altogether, you can try what I suggested here.

Basically, have a container div that's slightly narrower than your content div. Have the container set to overflow:hidden, but the content div set to overflow:scroll. If the container is narrower, it will hide the scroll bar.

Upvotes: 2

Related Questions