Troubleshooting compatibility issues between jQuery scrollLeft and Angular

Question

Troubleshooting compatibility issues between jQuery scrollLeft and Angular

As I attempt to programmatically scroll a horizontally overflowing div, I am confident that my final code should resemble the following:

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

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

Despite my efforts to locate the right element and make it work, I found myself struggling. To test all parent elements for scrolling, I created this snippet:

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

Although some elements scrolled, the one I needed did not respond. Surprisingly, the correct element does scroll horizontally with:

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

However, I remain puzzled as to which element is causing the reaction. Despite adding IDs throughout my HTML and targeting them, scrollLeft continues to fail on the necessary element.

Considering I am using Angular, I wonder if this could be influencing the situation in any way.

javascript jquery css angularjs scroll

Answer 1

Answer №1

Neht (from www.lin.net.nz: Issue: jQuery ScrollLeft Chrome Hidden Div) brings up the idea that this problem can sometimes be resolved by:

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

This made me think, could this approach work?

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

And just like that, the content scrolled magically!

Armed with this knowledge, I navigated up the HTML elements in Chrome. Instead of making changes to my HTML document and testing the solution, I noticed Angular was adding an element to my page:

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

So, I included a CSS rule for this newly identified element:

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

The final code now appears as follows:

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

Answer 2

Neht (from www.lin.net.nz: Issue: jQuery ScrollLeft Chrome Hidden Div) brings up the idea that this problem can sometimes be resolved by:

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

This made me think, could this approach work?

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

And just like that, the content scrolled magically!

Armed with this knowledge, I navigated up the HTML elements in Chrome. Instead of making changes to my HTML document and testing the solution, I noticed Angular was adding an element to my page:

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

So, I included a CSS rule for this newly identified element:

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

The final code now appears as follows:

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

Answer 3

Answer №2

When I needed to focus on a specific column two-thirds of the way across my grid upon loading my page, I opted for a simple solution that involved scrolling horizontally.

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

I made use of ngViewport and scrollLeft functions from jQuery with minimal effort. The selector .ngViewport is designed for targeting any ng grid. By referencing #datagrid and manipulating its width value, I was able to achieve the desired result.
By dividing by 4, I successfully positioned the column in the middle upon data grid load. This approach worked effectively due to the fixed number of columns present in my data.

Answer 4

When I needed to focus on a specific column two-thirds of the way across my grid upon loading my page, I opted for a simple solution that involved scrolling horizontally.

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

I made use of ngViewport and scrollLeft functions from jQuery with minimal effort. The selector .ngViewport is designed for targeting any ng grid. By referencing #datagrid and manipulating its width value, I was able to achieve the desired result.
By dividing by 4, I successfully positioned the column in the middle upon data grid load. This approach worked effectively due to the fixed number of columns present in my data.

Troubleshooting compatibility issues between jQuery scrollLeft and Angular

Answer №1

Answer №2

Similar questions

Let's explore further - delving into JSON & array manipulation using the foreach loop in Pure JavaScript

How to place a scrollable content below a fixed flexbox navigation menu

Create a dynamic AppBar Toolbar in React Admin that changes based on the current page

Problem with Ionic App crashing

Internet Explorer 8 comes with excess padding at the top and bottom, causing un

What is the best way to choose a specific section of a string using JQuery?

Tips for styling buttons in react-admin with custom CSS

The plugin that simplifies adding and removing form fields in jQuery

Executing an AJAX request on Rails 3 without triggering a redirect by using a link/button

The use of a Bootstrap row is leading to incorrect dimensions for FullPageJS

Am I on the right track in my understanding of how document and viewport relate to mouse position in JavaScript?

Adding properties with strings as identifiers to classes in TypeScript: A step-by-step guide

What is the best way to implement a new search input for my datatable while also enabling the searchHighlight feature?

CSS layout: The full-width header should align its left margin with the centered content-div

How can an external style sheet be inserted into an iframe?

I am interested in redirecting command line output to a file rather than displaying it in the standard

Assign a background image to a button using an element that is already present on the page

Uploading images dynamically using Ajax and PHP upon submission

Unexpected Error: Unable to access the 'position' property of an undefined element (D3.JS)

Position a Paper component in the center of a div