仅动态滚动

Question

我有一些HTML，CSS和jQuery代码。我们的想法是，当检查无线电按钮时，div应该水平滚动到该无线电按钮的左侧位置。

有一个问题。如果div被滚动到radio8的左侧位置，则应检查radiobutton radio8并且我应该看到警报。这不会发生。

＆＃13;

    var container = $('div'),
        scrollTo = $('#td9');

    container.animate({
      scrollLeft: scrollTo.offset().left - container.offset().left + container.scrollLeft()
    });

    $('div > input').each(function() {
      var radioInput = $(this);
      if(radioInput.is(':checked')) {
        $('div').animate({
          scrollLeft: radioInput.offset().left - $('div').offset().left + $('div').scrollLeft()
        }, 2000);
      }
    });

    $('input[type=radio]').on('change', function() {
      if($(this).is(':checked')) {
        $('div').animate({
          scrollLeft: $(this).offset().left - $('div').offset().left + $('div').scrollLeft()
        }, 2000);
      }
    });

    // the following does not work
    container.scroll(function() {
      if(container.scrollLeft() + container.width() == $('#td8').width()) {
        $("#radio8").prop("checked", true)
        alert("reached 8!");
      }
    });

＆＃13;

    div {
      width: 100px;
      height: 70px;
      border: 1px solid blue;
      overflow: auto;
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
      <table id="my_table">
        <tr>
          <td id='td1'><input type="radio" name="distance" value="1" />111111</td>
          <td id='td2'><input type="radio" name="distance" value="2" />222222</td>
          <td id='td3'><input type="radio" name="distance" value="3" />333333</td>
          <td id='td4'><input type="radio" name="distance" value="4" />444444</td>
          <td id='td5'><input type="radio" name="distance" value="5" />555555</td>
          <td id='td6'><input type="radio" name="distance" value="6" />666666</td>
          <td id='td7'><input type="radio" name="distance" value="7" />777777</td>
          <td id='td8'><input id="radio8" type="radio" name="distance" value="8" />888888</td>
          <td id='td9'><input type="radio" name="distance" value="9" checked="checked" />999999</td>
        </tr>
      </table>
    </div>

＆＃13;

Answer 1

仅动态滚动

如果您想知道滚动何时结束，最简单的解决方案是使用animate的complete回调来捕捉动画结束。

＆＃13;

$(function(){
  $('.move').animate({
    scrollLeft: 200
  }, 2000, function(){
    alert('Reached!');
  });
});

＆＃13;

.move {
  outline: solid red;
  width: 100px;
  white-space: nowrap;
  overflow: auto;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="move">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit!</p>
</div>

＆＃13;

ScrollSpy 方法

如果你想在用户自己滚动容器时触发某些操作（不选择radio），那么你需要记住，你不应该用{{1}明确地比较位置。 }。像原子一样，像素可以分割成小块，因此最终可能会偏移==，它永远不会等于128.423px。此外，滚动几乎总是由多个像素同时完成，因此您需要保持一定的容差（至少+/- 128px）。

＆＃13;

5px

＆＃13;

$(function(){
  $('.move').scroll(function() {
    if ($(this).scrollLeft() >= 200) {
      alert('Reached!');
    }
  });
});

＆＃13;

.move {
  outline: solid red;
  width: 100px;
  white-space: nowrap;
  overflow: auto;
}

＆＃13;

Answer 2

我认为你有两个问题：

container.scrollLeft() + container.width() == $('#td8').width()

将这些值打印到控制台时，您会看到左侧总是大于右侧。您可能希望使用$('#td8').offset().left代替.width()。

其次，你用相等的算子比较双方。我认为使用大于或等于运算符更安全。至少在我的机器上，即使滚动到达容器右侧，也不能保证两个值相等。

当div滚动到正确位置时，jQuery并检查radiobutton

2 个答案:

仅动态滚动

ScrollSpy 方法