I'm trying to programmatically scroll a div, overflowing horizontally. I feel pretty confident that my end result code should look like this:

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

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

```

But I couldnt seem to find the right element, so it wasnt working, So I wrote this little snip-it to test all of the parent elements for scrolling.

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

```

And some elements scrolled, but not the one that I needed to. However, the correct element does scroll horizontally with:

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

```

But I can't seem to figure out which element reacts. I have been placing id's all over my HTML and targeting them, but still, scrollLeft fails on the element I need.

I am using Angular, and I don't know if that could be interfering in some way.