добавление поддержки браузера (-webkit-, -moz- et c.) удаляет стилизацию?

Question

код:

 ::-webkit-scrollbar,
 ::-moz-scrollbar,
 ::-o-scrollbar,
 ::-ms-scrollbar{
    width: 15px;
}

 ::-webkit-scrollbar-thumb,
 ::-moz-scrollbar-thumb,
 ::-o-scrollbar-thumb,
 ::-ms-scrollbar-thumb{
    box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #0004ff, 0 0 30px #0004ff, 0 0 40px #0004ff, 0 0 55px #0004ff, 0 0 75px #0004ff;
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
}

 ::-webkit-scrollbar-track,
 ::-moz-scrollbar-track,
    ::-o-scrollbar-track,
    ::-ms-scrollbar-track{
    background: rgb(0, 0, 0);
}

Когда я добавляю поддержку браузера для других браузеров, стиль полосы прокрутки удаляется для chrome. как я могу решить эту проблему?

https://jsfiddle.net/cr4Lwzyb/1/

Answer 1

У вас есть отдельный селектор, так как браузеры будут игнорировать весь набор правил, если селектор неизвестен.

 ::-webkit-scrollbar { width: 15px; }
 ::-moz-scrollbar { width: 15px; }
 ::-o-scrollbar { width: 15px; }
 ::-ms-scrollbar { width: 15px; }

 ::-webkit-scrollbar-thumb {
    box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #0004ff, 0 0 30px #0004ff, 0 0 40px #0004ff, 0 0 55px #0004ff, 0 0 75px #0004ff;
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
 }
 ::-moz-scrollbar-thumb {
    box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #0004ff, 0 0 30px #0004ff, 0 0 40px #0004ff, 0 0 55px #0004ff, 0 0 75px #0004ff;
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
 }
 ::-o-scrollbar-thumb {
    box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #0004ff, 0 0 30px #0004ff, 0 0 40px #0004ff, 0 0 55px #0004ff, 0 0 75px #0004ff;
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
 }
 ::-ms-scrollbar-thumb {
    box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #0004ff, 0 0 30px #0004ff, 0 0 40px #0004ff, 0 0 55px #0004ff, 0 0 75px #0004ff;
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
 }

 ::-webkit-scrollbar-track { background: rgb(0, 0, 0); }
 ::-moz-scrollbar-track { background: rgb(0, 0, 0); }
 ::-o-scrollbar-track { background: rgb(0, 0, 0); }
 ::-ms-scrollbar-track { background: rgb(0, 0, 0); }

Также обратите внимание, что все браузеры не поддерживают эти стили, независимо от префиксов селектора. Подробнее о текущем состоянии стиля полосы прокрутки .