jQuery的scrollLeft不與角的工作

我想以編程方式滾動div，水平溢出。我覺得非常有信心，我的最終結果代碼應該是這樣的：jQuery的scrollLeft不與角的工作

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

但我似乎無法弄清楚哪個元素反應。我一直把id全部放在我的HTML中，並將它們作爲目標，但仍然scrollThft在我需要的元素上失敗。

我正在使用Angular，我不知道這是否會干擾某種方式。

來源

2013-11-21 Graham P Heath

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

和魔法般的內容滾動！

有了這些知識我的工作我的方式HTML的瀏覽器，我在那裏修改我的html文件，並試圖解決方案之前，在Chrome中我注意到，角被添加到我的網頁，該元素的元素：

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

來源

2013-11-21 17:15:00

奇怪的是，這實際上工作！我也使用角度和嘗試使用scrollLeft並無法讓它工作，但設置爲自動，然後scrollLeft然後隱藏works.It雖然在IE 11閃爍很不好。 – Ronnie

當我加載我的頁面時，我不得不水平滾動到一個特定的列2/3的方式在我的網格上，我有一個固定數量的列，所以我採取了一個非常簡單的方法。

$(".ngViewport").scrollLeft(($("#datagrid").width())/4);

我用ngViewport和scrollLeft從jQuery的以最小的努力。 .ngViewport針對任何ng網格。我使用#datagrid並轉換寬度值。
我除以4得到加載我的數據網格中間的列，並像魅力一樣工作，因爲我的數據有固定數量的列。

來源

2014-07-17 21:30:18

jQuery的scrollLeft不與角的工作

回答

相關問題