javascript - jQuery scrollLeft 不适用于 Angular

Question

我正在尝试以编程方式滚动一个水平溢出的 div。我非常有信心我的最终结果代码应该如下所示:

  var $element = $('#widgetRow');//or maybe $('#widgetRow').parent();
  //With 1 or more parent()'s

  var scrollLeft = $element.scrollLeft();
  $element.animate({'scrollLeft':scrollLeft + delta},10);

但我似乎找不到合适的元素，所以它没有用，所以我写了这个小片段来测试所有父元素的滚动。

  $('#someDeepWidget').parents().each(function(){
     $(this).animate({'scrollLeft':300},10);
  });

有些元素滚动了，但不是我需要的那个。但是，正确的元素确实水平滚动:

  $('#someDeepWidget').parents().each(function(){
    $(this).animate({'scrollTop':300},10);
  });

但我似乎无法弄清楚哪个元素会使用react。我一直在我的 HTML 中放置 id 并定位它们，但 scrollLeft 在我需要的元素上仍然失败。

我正在使用 Angular，但我不知道它是否会以某种方式产生干扰。

Answer 1

Nehat(来自 www.lin.net.nz: Problem: jQuery ScrollLeft Chrome Hidden Div)指出，这有时可以用

解决

  element.css({'overflow': 'auto'}).scrollLeft();
  element.css({'overflow': 'hidden'});

这让我想知道，这行得通吗？

 $('#someDeepWidget').parents().each(function(){
   $(this).css({'overflow': 'auto'}).animate({'scrollLeft':300},10);
   $(this).css({'overflow': 'hidden'});
 });

内容像魔法一样滚动!

有了这些知识，我开始研究 Chrome 中的 HTML 元素，在我修改我的 html 文档并尝试解决方案之前，在 Chrome 中我注意到 Angular 正在添加到我的页面，这个元素:

<div data-role="page" data-url="/" tabindex="0" class="ui-page ui-page-theme-a ui-page-active">

所以我为这个新发现的元素添加了一个 css 规则:

[data-role="page"]{
  overflow:auto;
}

最终代码如下所示:

app.directive("gphBubbleHorizontalScrolling", function($swipe) {
  'use strict';
  return {
    restrict: 'EA',
    link: function(scope, ele, attrs, ctrl) {
      $swipe.bind(ele, {
        'start': function(coords,event) {
          startX = coords.x;
          startY = coords.y;
        },
        'move': function(coords) {
          pointX = coords.x;
          pointY = coords.y;
          if(pointY < startY + 20 && pointY > startY - 20){
            var delta =  startX - pointX;
            $('[data-role="page"]').animate({'scrollLeft':scrollLeft + delta},10);
            var scrollLeft = $('[data-role="page"]').scrollLeft();
          }
        }
      });
    }
  }
}