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

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);
}

Answer 1

相信你可以尝试添加

body{overflow:hidden;}

在你的 style.css ，取决于

滚动条显露出来。

你说的。