Question

您好我正在尝试在滚动条件上设置div的位置。这是fiddle。其实我想滚动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。 Mousewheel和DOMMouseScroll也需要event.originalEvent，因为不支持wheel事件。

使用event.originalEvent.pageX

＆＃13;

$( '#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);
});

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

2 个答案: