Kaydırma çubuğunu özelleştirin

Gezinme çubuğu, herhangi bir uygulamada ortak bir öğedir ve bu makalede, görünümünü değiştirmenize yardımcı olacağım

Kaydırma çubuğu, herhangi bir uygulamada ortak bir öğedir ve bu makalede, özellikle bir geliştiriciyseniz ve projeleriniz için kaydırma çubuğunu nasıl kolayca değiştireceğinizi arıyorsanız, görünümünü değiştirmenize yardımcı olacağım.

Başlamadan önce, bu özelliğin yalnızca webkit tabanlı tarayıcılarda mümkün olduğunu bilmelisiniz; bununla birlikte, aynı şey olmasa da, inşa ettiğiniz her şeye yakın olan Firefox desteğini de içerir.

Düzenleme

Aşağıdaki stilleri web sitenize ekleyin, örneğin WordPress kullanıyorsanız bunları style.css dosyanıza eklemelisiniz, Blogger olması durumunda Şablon Tasarımcısından CSS Ekle seçeneğini kullanın.

body::-webkit-scrollbar {
  width: var(--scroll-size, 10px);
  height: var(--scroll-size, 10px);
}
body::-webkit-scrollbar-track {
  background-color: var(--scroll-track, transparent);
  border-radius: var(--scroll-track-radius, var(--scroll-radius));
}
body::-webkit-scrollbar-thumb {
  background-color: var(--scroll-thumb-color, grey);
  background-image: var(--scroll-thumb, none);
  border-radius: var(--scroll-thumb-radius, var(--scroll-radius));
}

Kişiselleştir

Bu noktaya kadar çubuğun farklı bir stili olacak ama asıl ilginç olan şimdi onu değişkenlerle özelleştirebilmeniz. İşte oluşturduklarımın tam listesi:

null

Con estas variables puedes crear estilos de la barra principal. A continuación te proporciono algunos ejemplos, estos estilos son los mismos que puedes ver en la demostración en CodePen, solo copia el código que te guste (elige solo uno) y agrégalo a tus estilos:

Örnek 1

:root {
  --scroll-size: 10px;
  --scroll-radius: 10px;
  --scroll-track: rgb(0 0 0 / 40%);
  --scroll-thumb-color: #dfdfdf;
}

Örnek 2

:root {
  --scroll-size: 8px;
  --scroll-radius: 10px;
  --scroll-track: rgb(255 255 255 / 10%);
  --scroll-thumb-color: rgb(0 0 0 / 80%);
}

Örnek 3

:root {
  --scroll-size: 5px;
  --scroll-radius: 10px;
  --scroll-track: rgb(255 255 255 / 10%);
  --scroll-thumb-color: #fff;
}

oÖrnek 4

:root {
  --scroll-size: 12px;
  --scroll-radius: 20px;
  --scroll-track: rgb(0 0 0 / 40%);
  --scroll-thumb: linear-gradient(45deg,
      rgba(255, 255, 255, 0.25) 20%, transparent 20%,
      transparent 40%, rgba(255, 255, 255, 0.25) 40%,
      rgba(255, 255, 255, 0.25) 60%, transparent 60%,
      transparent 80%, rgba(255, 255, 255, 0.25) 80%);
  --scroll-thumb-color: #f97316;
}

Örnek 5

:root {
  --scroll-size: 15px;
  --scroll-radius: 20px;
  --scroll-track: rgb(255 255 255 / 10%);
  --scroll-thumb: linear-gradient(45deg, #00aeff, #a68eff);
}

Örnek 6

:root {
  --scroll-size: 12px;
  --scroll-radius: 20px;
  --scroll-track: rgb(0 0 0 / 40%);
  --scroll-thumb: linear-gradient(
      rgba(255, 255, 255, 0.3) 20%, transparent 20%,
      transparent 40%, rgba(255, 255, 255, 0.3) 40%,
      rgba(255, 255, 255, 0.3) 60%, transparent 60%,
      transparent 80%, rgba(255, 255, 255, 0.3) 80%);
  --scroll-thumb-color: #10b981;
}

Firefox desteği

Los navegadores basados en webkit no presentaran ningún problema al leer los estilos, sin embargo Firefox es la excepción. Si deseas incluirlo en la modificación, agrega el siguiente código:

html, body {
  scrollbar-color: var(--scroll-thumb-color, grey) var(--scroll-track, transparent);
  scrollbar-width: thin;
}

De esta manera parte de los estilos del scroll en otros navegadores, también los verás en Firefox, toma en cuenta que solo será el color del indicador y de la pista.

Mixin para Sass

Si eres desarrollador y quieres incluir en tu proyecto la posibilidad de editar la barra de desplazamiento, he diseñado el siguiente mixin que puede ayudarte, solo debes incluir el siguiente código a tu proyecto:

@mixin scroll-style($size: 10px,
  $thumb: none,
  $thumb-color: grey,
  $thumb-radius: 10px,
  $track-color: transparent,
  $track-radius: 10px) {

  // Respaldo para Firefox
  scrollbar-color: $thumb-color $track-color;
  scrollbar-width: thin;

  // Navegadores basados en webkit
  &::-webkit-scrollbar {
    width: $size;
    height: $size;
    &-track {
      background-color: $track-color;
      border-radius: $track-radius;
    }
    &-thumb {
      background-color: $thumb-color;
      background-image: $thumb;
      border-radius: $thumb-radius;
    }
  }
}

Argümanlar

La siguiente tabla contiene información de los parámetros del mixin que puedes definir, y su valor por defecto en caso de que no lo hagas:

Incluir

Puedes llamar al mixin y reemplazar el valor de los argumentos por defecto (en caso de que asi lo requieras), por ejemplo si quieres modificar el scroll de todo el documento:

:root {
  @include scroll-style($size: 10px, $thumb-color: #ccc);
}

Si prefieres crear una utilidad que puedas aplicar fácilmente a cualquier elemento y que esta incluya personalización con variables, quizás te interese realizarlo de esta manera:

.scroll {
  @include scroll-style(
      $size: var(--scroll-size),
      $thumb:  var(--scroll-thumb),
      $thumb-color: var(--scroll-thumb-color),
      $thumb-radius: var(--scroll-thumb-radius),
      $track-color: var(--scroll-track-color),
      $track-radius: var(--scroll-track-radius),
    );
}

Ahora solo debes definir las variables en tu archivo de configuración e incluir la clase de la utilidad a los elementos en donde se requiera:

<div class="scroll"></div>

:root {
  --scroll-size: 5px;
  --scroll-radius: 10px;
  --scroll-thumb-color: #464646;
  --scroll-track-color: transparent;
}

Elbette önerileriniz, düzeltmeleriniz varsa veya sadece nasıl yaptığınızı paylaşmak istiyorsanız, yorum bırakın. Mesajlarınızı okumaktan memnuniyet duyarım.

Çözüm

Kişisel olarak bu çubuğu değiştirme taraftarı olmasam da, web sitenize biraz daha kişilik kazandırmak veya bazı öğelerin tasarımını daha iyi entegre etmek çok yararlı olabilir.

Bu makale sizin için yararlı olduysa, paylaşmayı ve yorum olarak bırakabileceğiniz tüm soruları unutmayın, herkese cevap veriyorum. Okuduğunuz için teşekkürler.