Làm thế nào để thêm một hiệu ứng di chuột bổ sung cho di chuyển thanh

Question

Trong css của tôi, tôi đã thay đổi phong cách của thanh sroll và có vẻ như

body::-webkit-scrollbar { 
    width: 0.7em; 
} 
body::-webkit-scrollbar-track { 
    -webkit-box-shadow: inset 0 0 6px rgba(154,165,159,0.5); 
} 
body::-webkit-scrollbar-thumb { 
    background-color: #D0CACD; 
    outline: 1px solid LightGrey; 
    box-shadow: 7px 7px 50px grey; 
} 

Nó hoạt động. Và nếu tôi thêm di chuột:

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

Sau đó, nó cũng hoạt động khi tôi thêm hoạt ảnh webkit vào đó thì tại sao nó không hoạt động. Sau khi thêm hoạt ảnh webkit, nó hoàn toàn trông giống như:

body::-webkit-scrollbar-thumb:hover { 
    background-color: #b8c0bc; 
    -webkit-animation: scrollbig 1s; 
    animation: scrollbig 2s; 
} 

Hoạt ảnh không phát. Tại sao ? Tôi đang sử dụng google chrome. Và bạn cũng có thể xem mã hoạt ảnh @keyframe:

@-webkit-keyframes scrollbig { 
    from {width: 0.6em;} 
    to {width: 0.9em;} 
} 

Vui lòng cho biết cách làm cho hoạt ảnh hoạt động. Cảm ơn đặc biệt.

Answer 1

Như tôi có thể thấy, có một vài lý do tại sao điều này không hiệu quả.

Bạn không thể đặt chiều rộng là body::-webkit-scrollbar-thumb. Nó sẽ luôn giống như body::-webkit-scrollbar.

Bạn không thể thay đổi chiều rộng body::-webkit-scrollbar trên :hover. Có hoặc không có hoạt ảnh.

body::-webkit-scrollbar { 
    width: 0.7em; 
} 

body::-webkit-scrollbar:hover { 
    width: 0.9em; // Will be ignored 
} 

Giá trị from của quy tắc keyframes sẽ được đặt. Nhưng bất kỳ hoạt ảnh nào trên phần tử giả thanh cuộn đơn giản sẽ không phát.

body::-webkit-scrollbar-thumb { 
    background: yellow; // Scroll thumb is yellow 
} 

body::-webkit-scrollbar-thumb:hover { 
    -webkit-animation: scrollbig 1s; 
} 

// 0% = from, 100% = to 
@-webkit-keyframes scrollbig { 
    0% {background: red;} // Scroll thumb is red 
    1% {background: green;} // Will be ignored 
    100% {background: blue;} // Will be ignored 
} 

Chuyển tiếp cũng bị bỏ qua.

body::-webkit-scrollbar-thumb { 
    background: yellow; // Scroll thumb is yellow 
    transition: background 2s; // Will be ignored 
} 

body::-webkit-scrollbar-thumb:hover { 
    background: red; // Scroll thumb is red 
} 

Answer 2

Điều này sẽ thay đổi độ rộng, chuyển đổi không may không được hỗ trợ. (Đây là trong sass)

::-webkit-scrollbar { 
    width: 2px; 
    background-color: #F5F5F5; 

    &:hover { 
     width: 4px; 
    } 
    }