Как убрать стрелки в полосе прокрутки через CSS

Question

Как убрать стрелки в полосе прокрутки через CSS

Как правило, в полосе прокрутки будут стрелки вверх и вниз на обоих концах вертикальной полосы прокрутки.

Есть ли в любом случае, чтобы удалить его так, чтобы появилась только полоса прокрутки, а не стрелки на обоих концах. Ниже приведен мой CSS:

.scrollbar-vertical

{

    top: 0;

    right: 0;

    width: 17px;

    height: 100%;

    overflow-x: hidden;

    scrollbar-3dlight-color:#999;

    scrollbar-arrow-color:white;

    scrollbar-base-color:white;

    scrollbar-face-color:#999;

    border-radius:5px 5px; 

}

692 3

html css

3 ответов:

Comments

Ничего не найдено.

Dilusha Gonagala · Accepted Answer · 2015-12-18 13:10:54

Предполагая, что вы хотите настроить полосу прокрутки браузера,

Вы можете сделать это легко с некоторыми хорошими плагинами Jquery, или вы можете сделать волшебство с css. Но пока он работает только в браузерах webkit, вот как
::-webkit-scrollbar {
    width: 12px;
}

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

/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(255,0,0,0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(255,0,0,0.4); 
}
Источник: http://css-tricks.com/custom-scrollbars-in-webkit/

Еще вы можете использовать плагин. (Рекомендуется)

Как и в предыдущем комментарии, я предлагаю вам использовать плагин niceScroller. Это просто и приятно.

Источник : http://areaaperta.com/nicescroll/

Простая Реализация
<script> 

     $(document).ready(

      function() { 

        $("html").niceScroll();

      }

    );

</script>

Shridhar Sagari · Accepted Answer · 2018-02-15 11:16:46

Вы можете использовать стиль ниже в вашем css, чтобы скрыть стрелки полосы прокрутки,
::-moz-scrollbar-button:decrement,
::-moz-scrollbar-button:increment,
::-webkit-scrollbar-button:decrement,
::-webkit-scrollbar-button:increment {
  width: 0px;
}
Или
::-moz-scrollbar-button, ::-webkit-scrollbar-button {
  width: 0px;
}

The Mini John · Accepted Answer · 2013-07-20 07:15:44

visibility: collapse !important; 
Может быть ?

-2

2013-07-20 07:15:44