Clever Geek Handbook

Scroll multiple items at the same time

I'm on a brick wall. I have a small project:

(LINK REMOVED)

You can see a lot of horizontal scrolling, when you bring the browser closer to the width of a mobile phone, you can scroll horizontally. My problem is how do I get it so that if you scroll horizontally on one element, everyone else will follow too? I've tried the following:

$('.container').scroll(function(){
    $('.container').scrollLeft($(this).scrollLeft());    
})

But I'm not burning anywhere. Any help would be appreciated.

UPDATE

It turns out it works when you paste the code into the console AFTER the page has loaded. I have resorted to:

$(document).on('scroll', '.container', function(){
    $('.container').scrollLeft($(this).scrollLeft());    
});

UPDATE2

Many thanks to @George and everyone who replied to point me in the right direction. The tables are loaded using jQuery:

$(this).next().load("/availability_Dev/availability_Dev.asp?stuff="+stuff+"");

All I had to do was attach my scrolling code after the items were loaded, for example:

$(this).next().load("/availability_Dev/availability_Dev.asp?stuff="+stuff+"", function(){
     $('.container').scroll(function(){
         $('.container').scrollLeft($(this).scrollLeft());    
     });
});
+3


source to share


2 answers


You said it works from the console after the page loads. So try this.

$(document).ready(function(){
  $(document).on('scroll', '.container', function(){
    $('.container').scrollLeft($(this).scrollLeft());    
  });
});

OR use the below code:



$(document).ready(function(){
  $('.container').scroll(function(){
    $('.container').scrollLeft($(this).scrollLeft());    
  });
});

Hope it helps.

+2


source


Please, try

$('.container').scroll(function(){
  var scrolled = $(this);
  $('.container').each(function() {
    $(this).scrollLeft(scrolled.scrollLeft());    
  })
})


Hope it helps.

0


source






More articles:


All Articles