獲取鼠標的位置並設置父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>