Как предотвратить прокрутку webkit-прокрутки из содержимого div?

Я использую webkit-scrollbar и сталкиваюсь с проблемами стилизации, поскольку полоса прокрутки webkit нажимает содержимое div слева, что приводит к переполнению содержимого.

Примечание

1-й ящик использует панель прокрутки браузера по умолчанию и не переполняет (хорошо)
В 2-ом ящике используется полоса прокрутки webkit, которая заканчивается нарушением макета. (Плохой/проблема)

http://jsfiddle.net/ryeah/1/

Любые идеи о том, что я делаю неправильно с полосой прокрутки webkit, вызывают деление/переполнение. Как мы можем исправить 2-й ящик? Благодаря

Код прокрутки Webkit:

.box2::-webkit-scrollbar {
    height: 16px;
    overflow: visible;
    width: 16px;
}
.box2::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .2);
    background-clip: padding-box;
    border: solid transparent;
    border-width: 1px 1px 1px 6px;
    min-height: 28px;
    padding: 100px 0 0;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1),inset 0 -1px 0 rgba(0, 0, 0, .07);
}
.box2::-webkit-scrollbar-button {
    height: 0;
    width: 0;
}
.box2::-webkit-scrollbar-track {
    background-clip: padding-box;
    border: solid transparent;
    border-width: 0 0 0 4px;
}
.box2::-webkit-scrollbar-corner {
    background: transparent;
}

Ответ 1

Hm.. Я не могу придумать, как получить полосу прокрутки webkit в оверлее. Одним из способов остановки разрыва строки является скрытие полосы прокрутки с помощью

.box2::-webkit-scrollbar {
  height: 16px;
  overflow: visible;
  width: 16px;
  display: none;
}

вы можете установить ширину вашего UL так же, как и поле, чтобы оно использовало функцию переполнения и отображалось под полосой прокрутки

.box ul {
  width: 149px;
}

Ответ 2

Вы пытались помещать overflow-y:overlay в родительский div? Он работает для меня в хроме. Эта страница говорит, что она работает и в сафари.

Ответ 3

Существует способ, чтобы полоса прокрутки отображалась вне div.

Используйте статическую ширину и абсолютную позицию div. Работает для меня.

#divID{
overflow: hidden;
width: calc(1024px + 0);
}

#divID:hover{
overflow-y:scroll;
}

Это дурачит DOM.