webkit scroller bar custom vertical height

Question

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

В центре, у меня есть содержание (сообщение), которое я хочу, чтобы отобразить. Он будет занимать полную площадь центра (высота: 100%).

Справа у меня есть кнопка закрытия вверху, а затем полоса прокрутки для области содержимого центра (которая имеет меньшую высоту, чем ее область содержимого).

Есть ли какой-либо способ css с помощью HTML, с помощью которого я могу выполнить желаемый результат.

ПРИМЕЧАНИЕ: Не нужно включать JavaScript и другие библиотеки. Только чистый CSS + HTML

Поддерживаемого браузер: Только Chrome

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

***** К.П *****

@LGSon ползунком до сих пор не видно полностью в исходном состоянии. Добавление скриншота для лучшего понимания.

Во 2-м скриншоте мы можем видеть полную высоту ползунком, а не в 1-ый.

Окружающая среда: Chrome версии 56.0.2924.87 (64-разрядная версия), MacOS Sierra v10.12

Answer 1

Вы не можете изменить высоту вертикальной полосы прокрутки, но вы могли бы сделать что-то вроде этого, где один дать первая кнопка прокрутки на той же высоте, что и кнопка закрытия , где один дает указателю большой палец/трекер margin-top, который затем будет определять размер палец/трекер, чтобы он идеально вписывался в пространство ниже.

Обратите внимание, как указал @Mohit Пандей, то "прокрутки высоты Кнопка" (первый образец) решение кажется not working properly on Mac, "запас-топ" делает (второй образец)

Образец 1

.wrapper { 
 
    position: relative; 
 
    width: 200px; 
 
    height: 70px; 
 
    border: 1px solid black; 
 
    overflow: hidden; 
 
} 
 

 
.scroller { 
 
    height: 100%; 
 
    overflow: auto; 
 
} 
 

 
.close { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    background: #B00; 
 
    padding: 1px 3px; 
 
    color: white; 
 
    cursor: pointer; 
 
} 
 

 
.scroller::-webkit-scrollbar { 
 
    width: 18px; 
 
} 
 

 
.scroller::-webkit-scrollbar-thumb { 
 
    background: gray; 
 
    height: 25px; 
 
} 
 

 
.scroller::-webkit-scrollbar-track-piece { 
 
    background: lightgray; 
 
} 
 

 
.scroller::-webkit-scrollbar-button:start { 
 
    height: 20px; 
 
}

<div class="wrapper"> 
 
    <div class="close">X</div> 
 
    <div class="scroller"> 
 
    Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content 
 
    </div> 
 
</div>

---

Пример 2

.wrapper { 
 
    position: relative; 
 
    width: 200px; 
 
    height: 70px; 
 
    border: 1px solid black; 
 
    overflow: hidden; 
 
} 
 
.scroller { 
 
    height: 100%; 
 
    overflow: auto; 
 
} 
 
.close { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    background: #B00; 
 
    padding: 1px 3px; 
 
    color: white; 
 
    cursor: pointer; 
 
} 
 

 
.scroller::-webkit-scrollbar { 
 
    width: 18px; 
 
} 
 
.scroller::-webkit-scrollbar-thumb { 
 
    background: gray; 
 
    height: 28px; 
 
    border-radius: 9px; 
 
    margin-top: 20px; 
 
} 
 
.scroller::-webkit-scrollbar-track-piece { 
 
    background: lightgray; 
 
    border-radius: 9px; 
 
    margin-top: 20px; 
 
}

<div class="wrapper"> 
 
    <div class="close">X</div> 
 
    <div class="scroller"> 
 
    Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content 
 
    </div> 
 
</div>