CODEWITHSUNDEEP
javascriptjquerycssangularjsscroll
Graham P Heath
Graham P Heath

Reputation: 7399

jQuery scrollLeft not working with angular

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.

Upvotes: 1

Views: 4586

Answers (2)

Shakil R
Shakil R

Reputation: 11

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);
  1. I used ngViewport and scrollLeft from jQuery with minimal effort. .ngViewport targets any ng grid. I used #datagrid and converted the width value.
  2. 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.

Upvotes: 0

Graham P Heath
Graham P Heath

Reputation: 7399

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

Upvotes: 1

Related Questions