html - How can I increase a scrollbar's width using CSS?

Question

Ask a Question

Welcome To Ask or Share your Answers For Others

html - How can I increase a scrollbar's width using CSS?

asked Oct 17, 2021 in Technique[技术] by 深蓝 (71.8m points)

Is it possible to increase the width of a scrollbar on a <div> element placed inside the <body>?

I am not talking about the default scrollbar on the browser itself, this page runs in full screen mode and because the browser scrollbar never comes into picture, the inner <div> element has its own scrollbar.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

250 views

1 Answer

深蓝 · Answer 1 · 2021-10-17T01:06:48+0000

This can be done in WebKit-based browsers (such as Chrome and Safari) with only CSS:

::-webkit-scrollbar {
    width: 2em;
    height: 2em
}
::-webkit-scrollbar-button {
    background: #ccc
}
::-webkit-scrollbar-track-piece {
    background: #888
}
::-webkit-scrollbar-thumb {
    background: #eee
}?

JSFiddle Demo

References:

Categories

html - How can I increase a scrollbar's width using CSS?

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags