CSS3 - Cách "khôi phục" :: - thuộc tính webkit-scrollbar đến thanh cuộn mặc định

Question

Xin chào, tôi đang sử dụng mã css tiếp theo để tạo kiểu thanh cuộn trong Safari và Chrome. Và hoạt động thực sự tuyệt vời nhưng tôi đang đối mặt với vấn đề tiếp theo, tôi muốn te khôi phục giá trị mặc định, khi tôi xem trang web trên ipad của tôi. Tôi đang sử dụng @media css để đạt được điều này nhưng, tôi không biết cách khôi phục các giá trị mặc định.

@media screen and (min-width: 768px) and (max-width: 1024px) { } 



/*Scroll bar nav*/ 
::-webkit-scrollbar { 
    width: 12px; 
} 

/* Track */ 
::-webkit-scrollbar-track { 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    background:#FFF;  
} 

/* Handle */ 
::-webkit-scrollbar-thumb { 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    background: rgba(204,204,204,0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
} 
::-webkit-scrollbar-thumb:window-inactive { 
    background: rgba(204,204,204,0.4); 
} 

Answer 1

Xin chào, tôi đã nhận ra rằng bạn có thể đặt tất cả các thuộc tính tự động; và sẽ làm trò lừa. Đây là một tự anwser nhưng tôi đoán một ngày nào đó ai đó có thể có cùng một câu hỏi.

/*Scroll bar nav*/ 
::-webkit-scrollbar { 
    width: auto; 
} 

/* Track */ 
::-webkit-scrollbar-track { 
    -webkit-box-shadow: auto; 
    -webkit-border-radius: auto; 
    border-radius: auto; 
    background:auto;  
} 

/* Handle */ 
::-webkit-scrollbar-thumb { 
    -webkit-border-radius:auto; 
    border-radius:auto; 
    background:auto; 
    -webkit-box-shadow:auto; 
} 
::-webkit-scrollbar-thumb:window-inactive { 
    background: auto; 
} 

Tôi không biết có tồn tại phương pháp nào khác không.

- CẬP NHẬT - Look như bạn cũng có thể sử dụng giá trị initial và unset // quay trở lại tất cả các giá trị

::-webkit-scrollbar { 
    all:unset; 
} 

hoặc áp dụng đối với một cụ thể một {width : unset} || {width : initial}

Answer 2

Sử dụng initial value hoặc unset value cho các thuộc tính bạn muốn trở lại (tùy thuộc vào chính xác như bạn muốn phục hồi chúng).

Cả hai giá trị này đều có thể được áp dụng cho tất cả các thuộc tính CSS.

dụ

::-webkit-scrollbar { 
    width: initial; 
} 

hoặc

::-webkit-scrollbar { 
    width: unset; 
} 

---

Nếu bạn muốn hoàn nguyên tất cả các thuộc tính của một quy tắc thì bạn nên sử dụng ví dụ all keyword

::-webkit-scrollbar-thumb { 
    all:unset; 
} 

---

Chú ý: Không IE hỗ trợ cho bất kỳ các tính được nêu ra.
Mức thay đổi hỗ trợ cho mỗi trình duyệt (xem tài liệu được liên kết để biết chi tiết)