jQuery scrollLeft not working with angular

Question

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.

Graham P Heath · Accepted Answer · 2013-11-21 17:15:00Z

1

Nehat (from www.lin.net.nz: Problem: jQuery ScrollLeft Chrome Hidden Div) points out that, this can some times be solved with

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

Which lead me to wonder, would this work?

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

and like magic the content scrolled!

With that knowledge I worked my way up the elements of HTML in Chrome, where before I was modifying my html document and trying the solution, in Chrome I noticed that Angular was adding to my page, this element:

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

So I added a css rule for this newly discovered element:

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

The final code looks like this:

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

answered Nov 21, 2013 at 17:15

Graham P Heath

7,4943 gold badges33 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ronnie Over a year ago

Weird, that actually worked! I am also using angular and trying to use scrollLeft and couldn't get it to work, but setting it to auto, then scrollLeft then hidden works.It flickers pretty bad in IE 11 though.

Aylen · Accepted Answer · 2014-07-17 21:52:33Z

0

I had to horizontally scroll to a specific column 2/3rds the way on my grid when loading my page and I had a fixed number of columns, so I took a very simplistic approach.

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

I used ngViewport and scrollLeft from jQuery with minimal effort. .ngViewport targets any ng grid. I used #datagrid and converted the width value.
I divided by 4 to get the column in the middle on loading my data grid and worked like a charm as I had a fixed number of columns to my data.

edited Jul 17, 2014 at 21:52

Aylen

3,56429 silver badges36 bronze badges

answered Jul 17, 2014 at 21:30

Shakil R

113 bronze badges

Collectives™ on Stack Overflow

jQuery scrollLeft not working with angular

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related