Thanh công cụ webkit có hoạt động với chuyển đổi webkit không?

Question

Tôi muốn có thanh cuộn webkit tùy chỉnh để tạo hoạt ảnh cho màu nền khác cho trạng thái di chuột. Mã bên dưới thay đổi màu khi di chuột nhưng không làm động bất kỳ thứ gì. Nó hoạt động trên một div vì vậy tôi nghi ngờ webkit-scrollbar không chơi tốt đẹp với quá trình chuyển đổi.

::-webkit-scrollbar-thumb { 
    background-color: #a8a8a8; 
    -webkit-transition: background-color 1s linear; 
} 

::-webkit-scrollbar-thumb:hover { 
    background-color: #f6f6f6; 
} 

Answer 1

Không, nó không được triển khai. Chúng tôi nên gửi lỗi trên http://bugs.webkit.org/

Answer 2

Bạn vẫn có thể áp dụng chuyển đổi của mình bằng cách đặt -webkit-scrollbar-thumb màu nền thành inherit và áp dụng chuyển đổi thành phần tử chính - trong trường hợp này là vùng chứa thanh cuộn.

Hạn chế duy nhất là, bạn phải tạo vùng chứa bên trong sẽ che dấu màu gốc của nó và đặt nền theo dõi thanh cuộn thành cùng màu mặt nạ. Dưới đây là một ví dụ:

màu Set container và chuyển

.container { 
    -webkit-transition: background-color 1s linear; 
    background-color: #fff; 
} 

.container:hover { 
    background-color: #cfcfcf; 
} 

.container .inner { 
    background-color: #FFFFFF; 
} 

Set scrolbar màu

::-webkit-scrollbar-thumb { 
    background-color: inherit; 
} 

::-webkit-scrollbar-track { 
    background: #fff; 
} 

Answer 3

Nó là khá dễ dàng để đạt được sử dụng kỹ thuật xb1itz của background-color: inherit; ngoài với -webkit-background-clip: text; .

Bản trình diễn trực tiếp; https://jsfiddle.net/s10f04du/

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    .container { 
    overflow-y: scroll; 
    overflow-x: hidden; 
    background-color: rgba(0,0,0,0); 
    -webkit-background-clip: text; 
    transition: background-color .8s; 
    } 
    .container:hover { 
    background-color: rgba(0,0,0,0.18); 
    } 
    .container::-webkit-scrollbar-thumb { 
    background-color: inherit; 
    } 
}