Loading...
(function(){<br />
let canvas = document.createElement('canvas'),<br />
ctx = canvas.getContext('2d'),<br />
w = canvas.width = innerWidth,<br />
h = canvas.height = innerHeight,<br />
particles = [],<br />
properties = {<br />
bgColor : 'rgba(17, 17, 19, 1)',<br />
particleColor : 'rgba(255, 40, 40, 1)',<br />
particleRadius : 3,<br />
particleCount : 60,<br />
particleMaxVelocity : 0.5,<br />
lineLength : 150,<br />
particleLife : 6,<br />
};<br />
<br />
document.querySelector('body').appendChild(canvas);<br />
<br />
window.onresize = function() {<br />
w = canvas.width = innerWidth;<br />
h = canvas.height = innerHeight;<br />
}<br />
<br />
class Particle {<br />
constructor() {<br />
this.x = Math.random()*w;<br />Loading...
The default scrollbar can be styled using CSS in WebKit-based browsers. However, customizing it is generally not recommended because it may not replicate all the behaviors of the native scrollbar. For example, it may not properly adapt its size or contrast when accessibility settings require it.
1.custom_scroll {2 overflow-y: scroll;3 scroll-behavior: smooth;45 scrollbar-color: yellow black; /* thumb color | scrollbar track color */6 scrollbar-width: thin; /* width */78 /* scrollbar track */9 &::-webkit-scrollbar {10 width: 3px;11 background-color: black;12 top: 130px;13 }1415 /* scrollbar thumb */16 &::-webkit-scrollbar-thumb {17 width: 3px;18 background-color: yellow;19 border-radius: 3px;20 }2122 &::-webkit-scrollbar-thumb:hover {23 background-color: yellow;24 width: 3px;25 }26}
More details about pseudo-classes can be found in the linked article.