Настройка полосы прокрутки

Я пытаюсь изучить эффект параллакса. Я получил этот проект от git hub https://github.com/james-marshall/parallax. Но единственное, что раздражает меня, это полоса прокрутки. Я пытаюсь поместить некоторые настраиваемые полосы прокрутки. Я следую этой ссылке для достижения этого http://www.codeproject.com/Tips/674478/Customize-Scrollbars-using-CSS3,but это не исправляет мою проблему. Я получаю что-то вроде этого.Настройка полосы прокрутки

enter image description here

Как я могу изменить то, что раздражает полоса прокрутки (вверху справа), если не по крайней мере, я могу сбросить его по умолчанию (.ie окна) .Я не могу найти какие-либо настройки полосы прокрутки (в CSS, Я новичок, я, возможно, ошибся), и я не знаю о java-скрипте.

Как это сделать ???

Вот HTML часть того, что я попробовал

<body data-type="single" data-speed="32"> 

    <div class="scrollbar" id="ex3"> 
      <div class="content">Example 3</div> 
    </div> 


    <div class="container"> 

    <div data-type="single" data-speed="8" id="divOne" class="div-one"> 
     <img src="img/up.png" alt=""> 
    </div> 


    <div data-type="single" data-speed="-16" id="divTwo" class="div-two"> 
     <img src="img/down.png" alt=""> 
    </div> 

    </div> 

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script> 

    <script src="js/plugins.js"></script> 
    <script src="js/script.js"></script> 


</body> 

</html>

и это CSS часть того, что я добавил

.scrollbar{ 
width:150px; 
height:300px; 
background-color:lightgray; 
margin-top:40px; 
margin-left:40px; 
overflow-y:scroll; 
float:left; 
} 
.content{ 
height:450px; 
} 
#ex3::-webkit-scrollbar{ 
width:16px; 
background-color:#cccccc; 
} 
#ex3::-webkit-scrollbar-thumb{ 
background-color:#B03C3F; 
border-radius:10px; 
} 
#ex3::-webkit-scrollbar-thumb:hover{ 
background-color:#BF4649; 
border:1px solid #333333; 
} 
#ex3::-webkit-scrollbar-thumb:active{ 
background-color:#A6393D; 
border:1px solid #333333; 
} 
#ex3::-webkit-scrollbar-track{ 
border:1px gray solid; 
border-radius:10px; 
-webkit-box-shadow:0 0 6px gray inset; 
}

источник

2014-02-20 Sham

Не заставляйте CSS прокрутки настолько точным для одного элемента? http://css-tricks.com/custom-scrollbars-in-webkit/ –

@Paulie_D любая идея о том, как сбросить строку прокрутки окон по умолчанию? – Sham

В уже загруженном проекте Nicescroll. Если вы хотите, чтобы отключить его, просто закомментируйте строки 129 и 130 script.js:

//var nice = $('html').niceScroll(); // The document page (body) 
//$('#div1').html($('#div1').html() + ' ' + nice.version);

Если вы используете Минимизированную версию, вы, очевидно, нужно восстановить, и все это.

источник

2014-02-20 13:40:18 rusmus

true Я сделал это. – Sham

вот небольшой стиль :) добавить его в любом месте в свой CSS-файл, у может редактировать, как вы хотите, надеюсь, что это помогает

::-webkit-scrollbar { 
    width: 12px; 
} 

::-webkit-scrollbar-track { 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px; 
} 

::-webkit-scrollbar-thumb { 
    border-radius: 10px; 

    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
    box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

источник

2014-02-20 13:03:30 ZetCoby

, что он делает, настраивается настраиваемая полоса прокрутки, но когда страница перестает загружаться (загрузка завершена), опять же, что в старой полосе прокрутки появляется любая догадка о том, как ее исправить ?? – Sham

Вы загружаете любой сброс css? если вы действительно убедитесь, что вы загрузите его первым – ZetCoby

пытаются использовать nicescroll, который имеет некоторые параметры настройки. совместимый со всеми основными браузерами.

источник

2014-02-20 13:04:56 Ravimallya

, вы можете помочь мне восстановить его по умолчанию. – Sham

, пожалуйста, уточните это: «Помогите мне в том, чтобы сбросить его до окна по умолчанию». – Ravimallya

Я хочу сказать, что я хотел, чтобы представление полосы прокрутки по умолчанию в веб-странице. Проблема в том, что проблема решена, из-за «nicescroll» при удалении он вернулся к представлению по умолчанию. – Sham

Настройка полосы прокрутки

ответ

Смежные вопросы