Question

与A scrollable area with the overflow hidden but no scroll bar相同的问题。

但这个问题从来没有回答过。他们放弃了，因为这对UI来说可能是一个坏主意。

我同意，但我的客户坚持认为没有滚动条成为网站的一部分。当鼠标悬停在边缘附近时，所有可滚动区域都会自动滚动。否则，使用触摸屏或滚动球/触控板进行滚动。

如果不是css，是否可以使用javascript格式化滚动条？

Answer 1

正如您已经说过的那样，这是一个坏主意，您可以使用overflow:hidden;隐藏滚动条，如您所说，当鼠标靠近您的scrollableElement的边缘时使用element.scrollTo(x,y) /窗口，或鼠标轮事件等。

Answer 2

jsBin demo

我使用了mousewheel plugin by Brandon Aaron

我添加了一些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);  
});

...到这个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;
}

你走了！可滚动但没有滚动条！
（问你是否有Q.）快乐的编码！

溢出被隐藏的可滚动区域？

2 个答案:

jsBin demo