Я смотрел учебник о том, как создать собственный курсор в CSS и JavaScript. Я сделал это, но когда я перемещаю его в нижнюю часть экрана, он переполняется и без надобности расширяет веб-сайт следующим образом: (этот темный кружок - курсор) 
I не знаю что делать. Это работает, когда я меняю overflow-y на hidden, но это не то, что я хочу, потому что тогда все остальные элементы на веб-сайте также скрыты.
CSS:
html {
font-size: 10px;
overflow-x: hidden;
cursor: none;
}
.cursor {
display: none;
z-index: 10;
position: absolute;
width: 5rem;
height: 5rem;
border-radius: 5rem;
background-color: #000000;
opacity: .4;
transform: translate(-50%, -50%);
pointer-events: none;
transition: all .3s ease;
transition-property: opacity, transform;
transform-origin: 100% 100%;
}
JS:
window.onload = () => {
cursor.style.display = 'inline';
}
const changeCursorPosition = e => {
cursor.style.left = e.pageX + 'px';
cursor.style.top = e.pageY + 'px';
}
window.addEventListener('mouseover', changeCursorPosition);
window.addEventListener('mousemove', changeCursorPosition);