jquery ile ::-webkit-scrollbar-thumb rengi değişmiyor

birotuz13 1382 gün önce

538 defa görüntülendi ve 1 kişi tarafından değerlendirildi

   $('button').click(function() {
    $("body::-webkit-scrollbar-thumb").css("background-color",secilenrenk);
   })

Şöyle bir şey yaptım fakat çalışmıyor başka nasıl rengini değiştirebilirim fikri olan var mı?

Soru hatalı mı? 👎

Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!

Spam olarak işaretle

Cevap yaz

הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Cevaplar (3)

tayfunerbilen

1382 gün önce

senin yaklaşımın hatalı. yapacağın şey aslında bir css değişkeni oluşturmak.

:root {
    --primary-color: red;
}

ve diyelim ki bu oluşturduğun rengi scroll'un rengi olarak ayarlamak istedin;

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: var(--primary-color);
    width: 4px;
    height: 4px;
}

ve istiyorsun ki bunu javascript tarafında seçtiğim renk ile değiştireyim.

<input type="color" id="colorpicker">

<script>
    $('#colorpicker').on('input', function(e) {
        $(':root').css('--primary-color', $(this).val());
    });
</script>

sonuç: https://codepen.io/tayfunerbilen/pen/eYvwYNB

#005930

birotuz13

1382 gün önce

bunu nasıl kullanacağım anlayamadım
secilenrenk kısmına renk kodu mu girmem gerek

#005928

bbera

1382 gün önce

Bu kod yardımcı olacaktır


$("button").click(function(){
    var ss = document.styleSheets[0];
    ss.insertRule(`::-webkit-scrollbar {background-color: ${secilenrenk}}`, 0);
});

#005926