ਕਿਵੇਂ ਬਣਾਓ: ਕਸਟਮ ਸਕਰੋਲ ਬਾਰਡ

CSS ਦੀ ਮਦਦ ਨਾਲ ਕਸਟਮ ਸਕਰੋਲ ਬਾਰਡ ਬਣਾਉਣਾ ਸਿੱਖੋ

ਕਿਵੇਂ ਕਸਟਮ ਸਕਰੋਲ ਬਾਰਡ ਬਣਾਓ

ਚਾਰਮੇ, ਐਜ਼ ਐਂਡ ਓਪਰਾ ਅਤੇ ਓਪਰਾ ਨੇ ਅਸਟੈਂਡਰਡ ਨਹੀਂ ਸਮਰਥਤ ਕੀਤੀ ਹੈ ::-webkit-scrollbar ਪਸਦਾ, ਜਿਸ ਨਾਲ ਅਸੀਂ ਬਰਾਉਜ਼ਰ ਦੇ ਸਕਰੋਲ ਬਾਰਡ ਦਾ ਦਰਸਾਵਾ ਸੋਧ ਸਕਦੇ ਹਾਂ。

ਹੋਰ ਉਦਾਹਰਣ ਵਿੱਚ ਇੱਕ 10px ਚੌਡਾਈ ਵਾਲਾ ਸਕਰੋਲ ਬਾਰਡ ਦਰਸਾਇਆ ਗਿਆ ਹੈ ਜਿਸ ਵਿੱਚ ਗ੍ਰੇ ਟ੍ਰੈਕ/ਰੰਗ ਅਤੇ ਗੂੜ੍ਹੇ ਗ੍ਰੇ (#888) ਸਲਾਈਡਰ ਹਨ:

/* ਚੌਡਾਈ */
::-webkit-scrollbar {
  width: 10px;
}
/* ਟ੍ਰੈਕ */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
/* ਸਲਾਈਡਰ */
::-webkit-scrollbar-thumb {
  background: #888;
}
/* ਮਾਉਸ ਨਾਲ ਸਮੇਤ ਸਲਾਈਡਰ */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

ਆਪਣੇ ਅਨੁਸਾਰ ਪ੍ਰਯੋਗ ਕਰੋ

ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ ਇੱਕ ਛਾਲ ਦਰਸਾਇਆ ਗਿਆ ਹੈ ਜਿਸ ਵਿੱਚ ਸਕਰੋਲ ਬਾਰਡ ਦਾ ਛਾਲ ਦਰਸਾਇਆ ਗਿਆ ਹੈ:

ਉਦਾਹਰਣ

/* ਚੌਡਾਈ */
::-webkit-scrollbar {
  width: 20px;
}
/* ਟ੍ਰੈਕ */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 10px;
}
/* ਸਲਾਈਡਰ */
::-webkit-scrollbar-thumb {
  background: red;
  border-radius: 10px;
}

ਆਪਣੇ ਅਨੁਸਾਰ ਪ੍ਰਯੋਗ ਕਰੋ

ਸਕਰੋਲ ਬਾਰਡ ਚੋਣਕਾਰ

webkit ਬਰਾਉਜ਼ਰ ਲਈ, ਤੁਸੀਂ ਨਿਮਨਲਿਖਤ ਪਸਦਾ ਇਸਤੇਮਾਲ ਕਰ ਸਕਦੇ ਹੋ ਕਿ ਬਰਾਉਜ਼ਰ ਦੇ ਸਕਰੋਲ ਬਾਰਡ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰੋ: