CODEWITHSUNDEEP
jquerycssscrollbaroverflowhidden
okwme
okwme

Reputation: 795

scrollable area while overflow is hidden?

Same question as A scrollable area with the overflow hidden but no scroll bar.

That question was never answered though. They gave up because it is maybe a bad idea for UI.

I agree but my client is adamant about no scroll bars being part of the site. All scrollable areas scroll automatically when mouse hovers near the edge. Otherwise scrolling occurs with touch screen or scroll ball/trackpad.

Is it possible to style away scroll bars with javascript if not css?

Upvotes: 1

Views: 640

Answers (2)

Roko C. Buljan
Roko C. Buljan

Reputation: 206008

jsBin demo

I used the mousewheel plugin by Brandon Aaron

Than i added some jQ:

var topPos = 0;
var scrH = $('#scrollable').outerHeight(true);
var parH = $('#parent').outerHeight(true);

$('#parent').mousewheel(function(event,delta){
    topPos = parseInt($('#scrollable').css('top'));
    if (delta > 0) {    // scrollUp
        if(topPos >= 0){ $('#scrollable').css({top: 0}); return; }
        $('#scrollable').css({top:'+=15px'}); 
    } else {            // scrollDown
        if(topPos <= (parH-scrH) ){ $('#scrollable').css({top: st}); return;}
        $('#scrollable').css({top:'-=15px'});
    }   
    $('#test').html(topPos+' '+scrH+' '+parH);  
});

... to this HTML:

<div id="parent">  
    <div id="scrollable">
        A very loooooong text.............
    </div>
</div>

CSS:

#parent{
    position:relative;
    height:200px;
    width:210px;
    overflow:hidden;
    padding-right:17px;
    color:#fff;
    background:#666;
}
#scrollable{
    position:absolute;
    top:0px;        
    width:180px;
    padding:15px;
}

And here you go! Scrollable but no scrollbars!
(Ask if you have Q.) Happy coding!

Upvotes: 0

rgthree
rgthree

Reputation: 7273

While, as you already said, it is a bad idea, you can use overflow:hidden; to hide your scrollbars and, as you mention, use element.scrollTo(x,y) when the mouse is near the edges of your scrollableElement/window, or in a mousewheel event, etc.

Upvotes: 1

Related Questions