我正在开发一个网站，我想用两个圆圈作为光标，我已经找到了一个answer来实现这一点，但问题是当我一直向右或向下移动鼠标时，这两个圆圈会导致垂直或水平滚动条。
这段代码是从上面的链接复制粘贴而来的，所以你可以试着把鼠标移到屏幕的底部，看看我在说什么。

$('body').mouseover(function() {
  $(this).css({
    cursor: 'none'
  });
});

$(document).on('mousemove', function(e) {
  $('#circle-big').css({
    left: e.pageX,
    top: e.pageY
  });
  $('#circle').css({
    left: e.pageX,
    top: e.pageY
  });

});

#circle-big {
  display: block;
  position: absolute;
  margin-top: -30px;
  margin-left: -30px;
  transition: all 1s linear;
  width: 60px;
  height: 60px;
  z-index: -1;
  text-align: center;
  border: 2px solid red;
  border-radius: 50%;
}

#circle {
  display: block;
  position: absolute;
  margin: auto;
  width: 15px;
  height: 15px;
  margin-top: -7.5px;
  margin-left: -7.5px;
  z-index: -1;
  background-color: rgba(255, 0, 0, 0.5);
  border-radius: 50%;
  box-shadow: 0px 0px 10px 4px rgba(255, 255, 255, 1);
}

a {
  font-size: 26px;
  text-align: center;
  margin: 100px auto;
  display: block;
}

a:hover {
  font-size: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cursor">
  <div id="circle-big"></div>
  <div id="circle"></div>
</div>

<a>link</a>

我想阻止这两个滚动条，所以当你移动鼠标所有的方式向右或向下，什么也不会发生。
有人知道怎么做吗？