Div在光标上方居中
Div在光标上方居中
提问于 2018-07-26 16:29:40
我正在尝试使用设置为跟随光标的<div>创建自定义光标。
在下面的代码片段中，这确实工作得很好，但是当向下滚动页面时，div直到滚动移动完成时才跟随，导致移动和感觉抖动。
有没有一种方法可以确保这种情况不会发生，并且无论如何，<div>都会完全跟随光标？
// vars
var $cursor = $('.custom-cursor');
// Follow cursor
$('body').on('mousemove', function(e) {
var parentOffset = $(this).offset();
var relX = e.pageX - parentOffset.left;
var relY = e.pageY - parentOffset.top;
$cursor.css({
left: relX,
top: relY
});
});body {
background: red;
height: 1000vh;
position: relative;
}
.custom-cursor {
position: absolute;
width: 30px;
height: 30px;
border-radius: 100%;
z-index: 9999;
background-color: yellow;
backface-visibility: hidden;
pointer-events: none;
transform: translate(-50%, -50%); // Center over cursor
transition: width .3s ease-in-out, height .3s ease-in-out;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="custom-cursor">
</div>
</body>
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-07-26 16:36:11
在您的代码中插入以下代码：
$( window ).scroll(function() {
//Your mouse move function
});要获取鼠标在滚动上的当前位置，请使用Get mouse position on scroll。
以下是fiddle http://jsfiddle.net/1byfq24g/与实现的代码的链接。
// vars
var xMousePos = 0;
var yMousePos = 0;
var lastScrolledLeft = 0;
var lastScrolledTop = 0;
var $cursor = $('.custom-cursor');
// Follow cursor
$('body').on('mousemove', function(e) {
var parentOffset = $(this).offset();
var relX = e.pageX - parentOffset.left;
var relY = e.pageY - parentOffset.top;
xMousePos = relX;
yMousePos = relY;
$cursor.css({
left: relX,
top: relY
});
});
$(window).scroll(function(event) {
if (lastScrolledLeft != $(document).scrollLeft()) {
xMousePos -= lastScrolledLeft;
lastScrolledLeft = $(document).scrollLeft();
xMousePos += lastScrolledLeft;
}
if (lastScrolledTop != $(document).scrollTop()) {
yMousePos -= lastScrolledTop;
lastScrolledTop = $(document).scrollTop();
yMousePos += lastScrolledTop;
}
console.log("x = " + xMousePos + " y = " + yMousePos);
$cursor.css({
left: xMousePos,
top: yMousePos
});
});body {
background: red;
height: 1000vh;
position: relative;
}
.custom-cursor {
position: absolute;
width: 30px;
height: 30px;
border-radius: 100%;
z-index: 9999;
background-color: yellow;
backface-visibility: hidden;
pointer-events: none;
transform: translate(-50%, -50%); // Center over cursor
transition: width .3s ease-in-out, height .3s ease-in-out;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<body>
<div class="custom-cursor">
</div>
</body>
Stack Overflow用户
发布于 2018-07-26 17:01:23
检查此更新的代码。我希望它能对你有所帮助。
var $cursor = $('.custom-cursor');
// Follow cursor
var xMousePos = 0;
var yMousePos = 0;
var lastScrolledLeft = 0;
var lastScrolledTop = 0;
$(document).mousemove(function(event) {
captureMousePosition(event);
})
$(window).scroll(function(event) {
if (lastScrolledLeft != $(document).scrollLeft()) {
xMousePos -= lastScrolledLeft;
lastScrolledLeft = $(document).scrollLeft();
xMousePos += lastScrolledLeft;
}
if (lastScrolledTop != $(document).scrollTop()) {
yMousePos -= lastScrolledTop;
lastScrolledTop = $(document).scrollTop();
yMousePos += lastScrolledTop;
}
$cursor.css({
left: xMousePos,
top: yMousePos
});
});
function captureMousePosition(event) {
xMousePos = event.pageX;
yMousePos = event.pageY;
$cursor.css({
left: xMousePos,
top: yMousePos
});
}body {
background: red;
height: 1000vh;
position: relative;
}
.custom-cursor {
position: absolute;
width: 30px;
height: 30px;
border-radius: 100%;
z-index: 9999;
background-color: yellow;
backface-visibility: hidden;
pointer-events: none;
transform: translate(-50%, -50%); // Center over cursor
transition: width .3s ease-in-out, height .3s ease-in-out;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="custom-cursor">
</div>
</body>
Stack Overflow用户
发布于 2020-09-01 00:19:47
这是一个非常晚的答案，但我一直在做一些非常类似的事情，并遇到了同样的问题。我发现最简单的解决方案是避免所有的js滚动动画，只需在css中将光标设置为position:fixed;，这将彻底解决您的问题。我猜修复来自这样一个事实:在修复的过程中，它总是与视区相关，而不是文档本身。无论如何，它都是有效的。
// vars
var $cursor = $('.custom-cursor');
// Follow cursor
$('body').on('mousemove', function(e) {
var relX = e.clientX;
var relY = e.clientY;
$cursor.css({
left: relX,
top: relY
});
});body {
background: red;
height: 1000vh;
position: relative;
}
.custom-cursor {
position: fixed;
width: 30px;
height: 30px;
border-radius: 100%;
z-index: 9999;
background-color: yellow;
backface-visibility: hidden;
pointer-events: none;
transform: translate(-50%, -50%); // Center over cursor
transition: width .3s ease-in-out, height .3s ease-in-out;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="custom-cursor">
</div>
</body>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51534344
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号