Holen Sie sich die Position der Maus und legen Sie die Position der Eltern Div Scroll

Question

Hallo, ich versuche, die Position des div auf der Rolle zu setzen. Dies ist fiddle. Eigentlich möchte ich das div scrollen, an welchem ​​Punkt ich meine Maus platziert habe und scrollen. Beim Klicken funktioniert es gut. Aber auf Scroll funktioniert es nicht.

Dies ist meine jQuery-Code

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

Answer 1

Auf Mausrad, die Sie auf der Suche sind, denn ich denke, Sie haben event.originalEvent zu verwenden. Mausrad und DOMMouseScroll benötigen event.originalEvent auch, da keine Unterstützung für Wheel Event vorhanden ist.

Verwendung 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

Sie können keine Maus geographische Position auf Scroll bekommen, so habe ich eine globale Variable es xMousePos zu speichern, überprüfen Sie diese Geige:

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>