scrollable area while overflow is hidden?

Question

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?

check out this : http://stackoverflow.com/questions/1326570/how-to-disable-browser-or-element-scrollbar-but-allow-scrolling-with-wheel-or-a — nandu, Apr 02 '12 at 17:01

rgthree · Answer 1 · 2012-04-02T17:35:35.023

1

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.

edited Apr 02 '12 at 17:35

answered Apr 02 '12 at 17:11

rgthree

7,217
17
21

And what about people who navigate with the keyboard? – steveax Apr 02 '12 at 18:46
@steveax Well, my "etc" meant any other time you want to scroll use scrollTo... on keydown events as well. Though, if you're hiding the scrollbars from your page, you're obviously crippling the usability of your page, which I mentioned, is a bad idea to start with. – rgthree Apr 02 '12 at 18:51

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

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!

scrollable area while overflow is hidden?

2 Answers2

jsBin demo