Заказной позиция WebKit прокрутки

Question

У меня есть пользовательское WebKit прокрутка, как это:

::-webkit-scrollbar{ 
background:transparant; 
width: 10px; 
} 
::-webkit-scrollbar-thumb{ 
background: #999 !important; 
} 

Так что делает серые пользовательские прокрутки вместо стандартного. Однако он застревает в правой части страницы. Я знаю, что могу изменить это, добавив маржу, прописку или границу к моему телу, но я использую полноэкранные (на фоне) изображения. Поэтому, когда я пытаюсь это сделать, все изображения также затронуты этим, чего я не хочу. Поэтому я попытался поместить полосу прокрутки, но это не работает (поскольку это не элемент, а свойство пользовательского агента ...

Так что я ищу способ (без использования другого плагина), чтобы настроить панель инструментов так, чтобы что она смещена в сторону.

Или, если это возможно, что я могу сделать скроллбар смещение в DIV.

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

Заранее благодарен

Answer 1

Простым способом управления положением пользовательской полосы прокрутки является установка прокручивающего элемента (тела?) С использованием окончательного позиционирования. Вам также нужно установить html для переполнения: auto;

Чтобы сделать большой палец прозрачным, используйте значение RGBa для объявления цвета. В этом случае я использовал 0,0,0,0,4 (красный, зеленый, синий, альфа). RGBA не поддерживается во всех браузерах, Крис Coyier имеет хороший стол, кто поддерживает его здесь: http://css-tricks.com/rgba-browser-support/

Если все, что вы хотите, чтобы показать это большой палец, чем также рассмотреть вопрос о сокрытии других элементов скроллинга: Resizer, кнопка прокрутки, и полоса прокрутки.

html { 
    overflow: auto; 
} 
body { 
    position: absolute; 
    top: 20px; 
    left: 20px; 
    bottom: 5px; 
    right: 20px; 
    overflow: scroll; 
} 
::-webkit-scrollbar{ 
    background:transparant; 
    width: 10px; 
} 
::-webkit-scrollbar-thumb{ 
    background: rgba(0,0,0,0.4); /*-- black at 40% opacity --*/ 
} 
::-webkit-resizer, 
::-webkit-scrollbar-button, 
::-webkit-scrollbar-corner {display:none} 

Заканчивать рабочую демо на http://jsfiddle.net/Buttonpresser/G53JQ/

Answer 2

Если вы все еще ищете для ответа (или кто-то еще, как я) - вот окончательный article about webkit scrollbars.
Отвечая на ваш первый вопрос - я предлагаю вам разместить весь свой прокручиваемый контент в div со 100% высотой и 90% шириной - 10% слева справа будут вашим смещением. Как что:

.superDiv{ 
    height:100%; 
    width:90%; 
    position:fixed; 
} 
body{ overflow: hidden } 

Второй вопрос - вы ищете

::-webkit-scrollbar-track-piece { 
    background:transparent; 
} 

Но, как Apple, люди настаивают на просмотр веб-страниц, полосы прокрутки не только свойства, установленные CSS видимы, так вам не нужно менять дорожку.

Answer 3

Clever решение, которое я нашел недавно было положить границу на правой стороне экрана/дел, который содержит полосы прокрутки:

<div class="yourdiv"> 
border-right: 5px solid #(background_color); 
</div>