jquery - 捕获水平和垂直滚动

Question

我有一个简单的 div 可以在其容器中水平和垂直滚动。

是否可以在水平和垂直滚动时捕获，所以当它水平滚动时控制台和垂直滚动时相同

$(function(){
  $('.content').on('scroll', function() {
    console.log('scrolling up dpwn')
    $(this).scrollLeft(function(){
      console.log('scrolling left right')
    });
  });
});

.wrapper{
  height: 300px;
  width: 300px;
  overflow: scroll;
}
.content{
  height: 1000px; 
  width: 1000px;
  background: linear-gradient(-40deg, red 18%, red 48%, green 59%,#8fb3da 100%);

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='wrapper'>
  <div class="content">
    
  </div>
</div>

标签： jquery

Answer 1

是的，您只是将您的活动附加到了错误的位置，并且还需要对卷轴进行一些操作。

  $('.wrapper').scroll(function(e) {
    $(this).scrollLeft($(this).scrollTop());
    $(this).scrollTop($(this).scrollLeft());
  });

.wrapper{
  height: 300px;
  width: 300px;
  overflow: scroll;
}
.content{
  height: 1000px; 
  width: 1000px;
  background: linear-gradient(-40deg, red 18%, red 48%, green 59%,#8fb3da 100%);

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='wrapper'>
  <div class="content">
    
  </div>
</div>