прокручиваемая область, а переполнение скрыто? - PullRequest
Новая
       51

прокручиваемая область, а переполнение скрыто?

1 голос
/ 02 апреля 2012

Тот же вопрос, что и Область прокрутки со скрытым переполнением, но без полосы прокрутки .

На этот вопрос так и не ответили. Они сдались, потому что это может быть плохая идея для пользовательского интерфейса.

Я согласен, но мой клиент непреклонен в том, что полосы прокрутки не являются частью сайта. Все прокручиваемые области прокручиваются автоматически при наведении курсора мыши на край. В противном случае прокрутка происходит с помощью сенсорного экрана или шарика прокрутки / трекпада.

Можно ли стилизовать полосы прокрутки с помощью javascript, если не css?

Ответы [ 2 ]

1 голос
/ 02 апреля 2012

Хотя, как вы уже сказали, это плохая идея, вы можете использовать overflow:hidden;, чтобы скрыть полосы прокрутки, и, как вы упомянули, использовать element.scrollTo(x,y), когда мышь находится вблизи краев вашего scrollableElement / окна, илив событии колесика мыши и т. д.

0 голосов
/ 02 апреля 2012

jsBin demo

Я использовал плагин mousewheel от 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.) Удачного кодирования!

...