如何防止自定义圆形光标添加滚动？

Question

我有一个小问题。我正在尝试在wordpress网站上添加自定义光标。

使用js和CSS，我设法将鼠标悬停时的动画添加了一个圆圈。但是，当带有圆圈的自定义光标到达页面的末尾时，就会显示滚动条。

如何预防？

JS

const cursor = document.querySelector('.cursor');
document.addEventListener('mousemove', e => {
   cursor.setAttribute("style", "top: "+(e.pageY - 40)+"px; left: "+(e.pageX - 40)+"px;")
})

$(document).on('mouseenter', 'a', function() {
$('.cursor').addClass('zooming');
  }).on('mouseleave', 'a', function() {
$(".cursor").removeClass("zooming")
  });

CSS

.cursor {
  z-index: 20;
  width: 80px;
  height: 80px;
  border: 1px solid black;
  border-radius: 50%;
  position: absolute;
  display: block;
  pointer-events: none;
  -webkit-transition:  transform .2s cubic-bezier(.175,.885,.32,1.275);
    -moz-transition:  transform .2s cubic-bezier(.175,.885,.32,1.275);
    -ms-transition:  transform .2s cubic-bezier(.175,.885,.32,1.275);
    -o-transition:  transform .2s cubic-bezier(.175,.885,.32,1.275);
    transition:  transform .2s cubic-bezier(.175,.885,.32,1.275);
    transform-origin: center center;
}
.zooming.cursor {
  background-color: white;
  mix-blend-mode: difference;
  border:none;
  -webkit-transform: scale(.3);
    -moz-transform: scale(.3);
    -ms-transform: scale(.3);
    -o-transform: scale(.3);
    transform: scale(.3);
}