Question

我正在尝试反向滚动两个选择控件。当我向下滚动第一个选择时，另一个应该向上滚动。这就是我目前正在做的事情

//scroll first list if second list is scrolled
$("#secondList").on("scroll", function(){    
    //alert("focused");
    $("#firstList").scrollTop($(this).scrollTop());
});

//scroll second list if first list is scrolled
$("#firstList").on("scroll", function(){
    $("#secondList").scrollTop($(this).scrollTop());
});

从底部开始第二个选择框我正在做这个

$("div #secondList").animate({ scrollTop: $("#2").height() }, "slow");

但它从两个开始选择。我的HTML是

<div class="container" style="margin-top: 50px;">
  <div id="1">
   <select name="color" id="firstList" size="3" class="form-control" ></select>
  </div>
  <div id="2">
    <select name="hex" size="3" id="secondList" class="form-control" style="margin-top: 50px;"></select>
  </div>
</div>

注意我正在动态添加选项

$.getJSON("ColorNameMap.json", function(data){
    for (var i = 0, len = data.length; i < len; i++) {
        var color = data[i].color;
        var value = data[i].value;

        $("#firstList").append('<option value="'+value+'">'+color+'</option>');
        $("#secondList").append('<option value="'+color+'">'+value+'</option>');
    }
});

我可以看到答案this example，但我想要反向滚动。请帮我顺利前进。

Answer 1

最大的挑战之一是获得滚动的方向 - 为此，您需要记录当前位置并将其与最后位置进行比较。

一旦弄清楚滚动的方向，您可以根据方向在其他可滚动区域中添加或减去。

下面，我假设$selects总是一组两个元素，并且在加载时，我将最后一个设置为滚动到底部（scrollHeight）。然后在滚动时，我得到它滚动的方向（请注意，第一次触发滚动处理程序，我们没有方向，因为我们只有一个数据点 - 它是当前位置），并滚动相同的数量相反的方向。

关于我在这里使用的requestAnimationFrame，有一个轻微的伎俩（详见Updating scrollTop before scroll listener is assigned triggers a scroll event）。根据您的浏览器支持，您可能需要填充。

(function() {
  // Start off scrolled to the bottom
  var $selects = $('select');
  $selects.last().scrollTop($selects.last().get(0).scrollHeight);

  var lastScroll = {
    whichEle: null,
    position: 0
  };
  
  // Wait until the scrollTop has applied itself (aka a repaint)
  window.requestAnimationFrame(function() {
    $selects.on('scroll', scrollOther);
  });
  
  function scrollOther() {
    var currPosition = $(this).scrollTop();

    if ($(this).is(lastScroll.whichEle)) {
      var positionDiff = currPosition - lastScroll.position;
     
      if(positionDiff === 0) { return; }

      var $other = $selects.not(this);
      
      $other.off('scroll'); // temporarily stop listening
      
      // Wait until the handler released itself (aka a repaint)
      window.requestAnimationFrame(function() {
        // Since scroll events happen so frequently, no need to animate (unless there's a debounce)
        $other.scrollTop($other.scrollTop() - positionDiff);
        
        // Wait until the scrollTop has applied itself (aka a repaint)
        window.requestAnimationFrame(function() {
          $other.on('scroll', scrollOther); // restart listening
        });
      });
      
      
      
      
    } else {
      // Just started scrolling a new div  
      lastScroll.whichEle = $(this);

      // Since there is no direction figured out yet, do nothing more than record for this event
    }

    lastScroll.position = currPosition;
  }
})();

select {
  width: 40%;
  margin: 0 5%;
  height: 75px;
  float: left;
  font-size: 14px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div id="1">
    <select name="color" id="firstList" size="3" class="form-control">
      <option>1 Lorem ipsum dolor</option>
      <option>2 sit amet, consectetur</option>
      <option>3 adipiscing elit</option>
      <option>4 Aenean venenatis lectus</option>
      <option>5 blandit, posuere eros ut</option>
      <option>6 condimentum nulla. Nulla facilisi</option>
      <option>7 Integer eget ex quis</option>
      <option>8 turpis ullamcorper vulputate</option>
      <option>9 eget a eros. Phasellus scelerisque</option>
    </select>
  </div>
  <div id="2">
    <select name="hex" size="3" id="secondList" class="form-control">
      <option>1 sit amet dignissim neque</option>
      <option>2 Suspendisse scelerisque</option>
      <option>3 vestibulum lacus</option>
      <option>4 eget tincidunt</option>
      <option>5 Phasellus aliquet</option>
      <option>6 leo eu purus sollicitudin</option>
      <option>7 semper quam ut ornare</option>
      <option>8 Nullam vitae mollis leo</option>
      <option>9 id hendrerit mi tristique</option>
    </select>
  </div>
</div>

反滚动两个div

1 个答案: