Updating the location of an item with a delay on mobile scrolling

Question

I am trying to make a sticky header + first column table. Works well on desktop browsers.

However, when I scroll the x axis of the table on the mobile device, the position update moves, that is, not fast enough.

I read various SO streams that iScroll offer. I am not sure how to use it correctly in this case. Should you catch the tbody scroll event, execute the default behavior, and update the position based on the values ​​of the iScroll event? Please point me in the right direction :)

 $(function() { var $tbody = $('tbody'); $tbody.on('scroll', function(e) { var left = $tbody.scrollLeft(); $('thead').css('left', -left); $('tbody td:nth-child(1), thead th:nth-child(1)').css('left', left); }); var iScroll = new IScroll($tbody[0], { probeType: 3 }); iScroll.on('scroll', function(){ console.log('not fired?'); }); }); 

https://jsfiddle.net/97r799gr/

To reproduce the problem, it is probably easiest for you to visit https://jsfiddle.net/97r799gr/show on your mobile phone. I use the edge of SGS7, so I think it will play on almost any mobile device.

Answer 1

IScroll uses a fixed-size wrapper with one scrollable content in it. Therefore, we cannot use tbody as a wrapper. We need to wrap the entire table and hold the necessary elements using CSS while scrolling.

I created a script with iscroll-probe.js code in it ( iscroll.js did not receive the scroll event). The bad news is that it only works on my iPhone. Scrolling suddenly stops while scrolling on my android5.1 device.

 // main code $(document).ready(function(){ $('#pos').text('initialize iscroll'); try{ var iScroll = new IScroll('#wrapper', { interactiveScrollbars: true, scrollbars: true, scrollX: true, probeType: 3, useTransition:false, bounce:false }); } catch(e) { $('#error').text('Error ' + e.name + ":" + e.message + "\n" + e.stack); } $('#pos').text('initialized'); iScroll.on('scroll', function(){ var pos = $('#scroller').position(); $('#pos').text('pos.left=' + pos.left + ' pos.top=' + pos.top); // code to hold first row and first column $('#scroller th:nth-child(1)').css({top: (-pos.top), left: (-pos.left), position:'relative'}); $('#scroller th:nth-child(n+1)').css({top: (-pos.top), position:'relative'}); $('#scroller td:nth-child(1)').css({left: (-pos.left), position:'relative'}); }); }); 

https://jsfiddle.net/0qv1kjac/11/

Answer 2

I was not able to get it to work with pure CSS, so I decided to remove iScroll and rewrite javascript in vanilla js. Now it works fine on my iphone. I do not have an android for testing.

New fiddle: https://jsfiddle.net/66a1b2rw/

Everything is the same as your original violin except js:

updated js

 var tbody = document.querySelector('tbody'); var thead = document.querySelector('thead'); var firstCol = document.querySelectorAll('tbody td:nth-child(1), thead th:nth-child(1)'); console.log(firstCol); tbody.addEventListener('scroll', function() { var left = tbody.scrollLeft; thead.style.left = '-' + left + 'px'; firstCol.forEach(function(x) {x.style.left = left + 'px'}) })