獲取鼠標的位置，並設置父卷的位置滾動

Question

你好，我正試圖設置在滾動div的位置。這是fiddle。其實我想滾動的div我在哪個點放置我的鼠標和滾動。點擊它工作正常。但在滾動它不起作用。

這是我的jQuery代碼

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

Answer 1

在鼠標滾輪，您正在尋找我猜，你必須使用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>

Answer 2

你不能在滾動鼠標的當前位置，所以我創建了一個全局變量來存放它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>