JQuery Nicescroll

Question

Я использую плагин nicescroll. http://areaaperta.com/nicescroll/

У меня есть только небольшое сомнение. Когда страница загружена, я вижу в браузере мою полосу прокрутки по умолчанию, а затем показанную полосу прокрутки nicescroll. Я хочу применить полосу прокрутки nicescroll ко всему документу, и у меня есть следующий код

var nice = $("body").niceScroll({
        preservenativescrolling: false,
        cursorwidth: '8px',
        cursorborder: 'none',
        cursorborderradius:'0px',
        cursorcolor:"#39CCDB",
        autohidemode: false, 
        background:"#999999"
     });

Если я установлю для autohidemode значение true, я не вижу полосу прокрутки по умолчанию в браузере. Но я хочу сделать полосу прокрутки nicescroll всегда видимой.

Кто-нибудь знает, почему это происходит?? Спасибо

Answer 1

Может быть, это может помочь вам. Меня устраивает.

<script id="twitter-wjs" src="../js/widgets.js"></script>
<script src="../js/jquery.min.js"></script>
<script src="../js/jquery.easing.1.3.js"></script>
<script src="../js/jquery.nicescroll.min.js"></script>


<script>

  // Hide Overflow of Body on DOM Ready //
$(document).ready(function(){
    $("body").css("overflow", "hidden");
});

// Show Overflow of Body when Everything has Loaded //
$(window).load(function(){
    $("body").css("overflow", "visible");        
    var nice=$('html').niceScroll({cursorborder:"",cursorcolor:"#333333",cursorwidth:"8px", boxzoom:true, autohidemode:false});

});
</script>

Answer 2

Вот пример того, что вы можете захотеть:

if (jQuery().niceScroll) {
    $("html").niceScroll({
        scrollspeed: 70,
        mousescrollstep: 38,
        cursorwidth: 15,
        cursorborder: 0,
        cursorcolor: '#0C090A',
        cursorborderradius: 0,
        autohidemode: true,
        horizrailenabled: false
    });
}

Answer 3

Моя первая мысль - сделать ваши уроки .nicescroll элементы overflow:hidden; внутри вашего CSS, поэтому полосы прокрутки не появятся,

чем после загрузки вашего документа (предпочтительно в window.load), примените плагин nicescroll и установите ваши элементы в overflow:auto с JQuery, как:

CSS:

.nicescroll{overflow:hidden;}

JQuery:

$(window).load(function(){
   $('.nicescroll').css({overflow:'auto'});
});

Я думаю, что в вашем случае вам нужно добавить идентификатор или класс (как в моем примере) к вашему body элемент.

Answer 4

Хорошо! Вот решение от меня. У меня была такая же проблема. Я применил так много методов, но они мне не помогли. Затем, после нескольких недель поиска, я нашел это решение. Я использую последнюю версию niceScroll v-3.7.6.

HTML: -

<div id="scrollable-div">
  <div class="content"></div>
</div>

CSS: -

/*Adding overflow hidden*/
.scrollable-div{
  overflow: hidden;
}

Да, это так просто. Просто дайте своему прокручиваемому div переполнение: скрыто. Для этого не нужно использовать какой-либо код Javascript.

В вашем случае вы можете просто сделать это:

body{
 overflow: hidden;
}