获取鼠标的位置并设置父div滚动的位置

Question

您好我正在尝试在滚动条上设置div的位置。 这是摆弄 。 实际上，我想滚动div并将鼠标放在哪一点上。 点击它可以正常工作。 但是在Scroll上它不起作用。

这是我的jQuery代码

$( '#target' ).on( 'wheel', function( e ) {
var x = e.pageX - this.offsetLeft;
$( "#target1" ).scrollLeft(x);
$( this ).html(x);
});

Answer 1

您无法获得鼠标在滚动上的当前位置，因此我创建了一个全局变量将其存储在xMousePos ，请检查以下提示：

 var xMousePos = 0; var yMousePos = 0; $("#target1").scroll(function(e) { var tg1 = $(this); var tg = tg1.children(0); var x = xMousePos; //console.log("Scroll:"+xMousePos); $(this).scrollLeft(x); $("#target1").children(0).html(x); }); $("#target1").mousemove(function(event) { xMousePos = event.pageX - this.offsetLeft; yMousePos = event.pageY - this.offsetLeft; }) 

 body { padding: 50px; } #target { background-color: gray; width: 500px; height: 240px; padding-top: 50px; font-size: larger; font-weight: bold; color: white; } #target1 { overflow-x: scroll; width: 300px; height: 300px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="target1"> <div id="target"></div> </div> 

Answer 2

在您正在寻找的event.originalEvent ，您必须使用event.originalEvent 。 Mousewheel和DOMMouseScroll也需要event.originalEvent ，因为不支持wheel事件。

使用event.originalEvent.pageX

 $( '#target' ).on( 'mousewheel', function( e ) { e.preventDefault(); var x = e.originalEvent.pageX - e.target.offsetLeft; $( "#target1" ).scrollLeft(x); console.log(e.originalEvent.pageX, e.target.offsetLeft); $( this ).html(x); }); $( '#target' ).on( 'click', function( e ) { var x = e.pageX - this.offsetLeft; $( "#target1" ).scrollLeft(x); console.log(e.pageX, this.offsetLeft); $( this ).html(x); }); 

 body { padding:50px; } #target { background-color:gray; width:500px; height:240px; padding-top:50px; font-size:larger; font-weight:bold; color:white; } #target1{ overflow-x: scroll; width:300px; height:300px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="target1"> <div id="target"></div> </div>