jQuery scrollLeft无法使用angular

jQuery scrollLeft not working with angular

本文关键字：angular scrollLeft jQuery      更新时间：2023-09-26

我正在尝试以编程方式滚动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);
  });

但我似乎不知道是哪种元素起了反应。我一直在我的HTML中放置id，并针对它们，但scrollLeft在我需要的元素上仍然失败。

我正在使用Angular，我不知道这是否会在某种程度上造成干扰。

Nehat（来自www.lin.net.nz：问题：jQuery ScrollLeft Chrome Hiddendiv）指出，这在某些时候可以用解决

  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();
          }
        }
      });
    }
  }
}

加载页面时，我必须在网格上水平滚动到特定的列的2/3，并且我有固定数量的列，所以我采取了一种非常简单的方法。

$(".ngViewport").scrollLeft(($("#datagrid").width())/4);
  1. 我用最少的精力使用了jQuery中的ngViewport和scrollLeft。.ngViewport针对任何ng网格。我使用了#datagrid并转换了宽度值
  2. 在加载数据网格时，我除以4，使列位于中间，并且像一个魅力一样工作，因为我的数据有固定数量的列
相关文章：