Question

我正在尝试在单击标签时向左/向右滚动div。无论如何，我的代码根本不起作用。在我看来，它不知道什么时候点击了标签。另一方面，在我看来，代码无法按原样滚动div。所以，也许我会在这里找到一些帮助。

<div id="main" style="width: 100%; overflow: auto">
  <div id="sub" style="overflow: hidden; width: 10000em; margin-left: -5000em; position: relative; left: 50%; text-align: center">
    <div id="navi1"><span><label for="go">Go</label></span></div>

    <input name="go" type="radio" id="go" />
  </div>
</div>

这是我的jQuery代码：

$('label').click(function() {
  var p = $( "div#navi1" );
  var position = p.position();
  // $('#main').scrollLeft(position.left);
  $('#main').scrollLeft(10000);
});

Answer 1

有几个问题。首先，您要使用Offset而不是Position，因为div.navi1位于最左侧位置（因此0,0）相对于其父div.sub。

然后你有一个jQuery的怪癖。它仍然在此click()函数内时不允许滚动。因此，解决问题的方法是包装timeout：

<div id="main" style="width: 100%; overflow: auto">
  <div id="sub" style="overflow: hidden; width: 10000em; margin-left: -5000em; position: relative; left: 50%; text-align: center">
    <div style="display: inline-block" id="navi2"><span><label for="go2">Go2 </label></span></div>
    <div style="display: inline-block" id="navi1"><span><label for="go">Go</label></span></div>
    <input name="go2" type="radio" id="go2" />
    <input name="go" type="radio" id="go" />
  </div>
</div>
<moveToLeft>Click me to position Go to the Left</moveToLeft>

<script>
$('label').click(function() {
   var p = $("div#navi1");
   var offset = p.offset();

   // wont work: $('main').scrollLeft(-offset.left);
   setTimeout(function() {
      $('#main').scrollLeft(-offset.left);
   }, 0);
});

$('moveToLeft').click(function() {    
   var curScrollLeft = $('#main').scrollLeft();
   var scrollOffset = $('#navi1').offset().left + curScrollLeft - 10; // a fiddle factor

   // timeout not needed if element is outside of scroll area.  Only in the case above.
   //setTimeout(function() {
      $('#main').scrollLeft(scrollOffset);
   //}, 0);
});
</script>

小提琴：https://jsfiddle.net/yzh3ovet/15/

单击标签时的jQuery和div scrollLeft

1 个答案: