How to fix scrollX movement issue in jQuery DataTables on mobile devices?

Question

I have used below code to simulate fixed header with vertical and horizontal scroll bars. See example on jsFiddle.

$('#liveTable').dataTable({
      'bSort': false,
      'destroy': true,
      'aoColumns': [
                    { sWidth: "85px", bSearchable: false, bSortable: false },
                    { sWidth: "75px", bSearchable: false, bSortable: false },
                    { sWidth: "80px", bSearchable: false, bSortable: false },
                    { sWidth: "80px", bSearchable: false, bSortable: false },
                    { sWidth: "85px", bSearchable: false, bSortable: false },
                    { sWidth: "70px", bSearchable: false, bSortable: false },
                    { sWidth: "70px", bSearchable: false, bSortable: false },
                    { sWidth: "50px", bSearchable: false, bSortable: false }
                ],
      'scrollY': 200,
      'scrollX': true,
      'info': false,
      'paging': false
 });

The above code is working fine in Desktop.

But in mobile devices when I scroll body of the content header part not moving accordingly. There is some delay (flickering effect) in header movement in mobile devices.

How to fix that header movement issue in mobile devices?

What version of the DataTables are you using? If it's not the latest (1.10.9), can you try 1.10.9 and see if you still experience the same problem? — Gyrocode.com, Sep 22 '15 at 15:08
@Gyrocode.com, I have updated my version (1.10.9). Event after updating the version, same issue exists. — RGS, Sep 22 '15 at 15:17
Besides a problem with custom widths, it works fine on Android 5, no flickering. On what mobile platform do you see flickering? — Gyrocode.com, Sep 24 '15 at 15:40
On some devices fixed position solutions are hard to do because there is poor support for the scroll event firing during momentum scrolling. Older iOS devices and android devices specifically suffer from this. There are some patches to fix this, but they are quite heavy and may induce flickering on a device that does not natively fire scroll events during momentum scrolling — Graham Bass, Sep 25 '15 at 04:00
In some cases adding translate3d(0,0,0) to the scrolling element may help, as it enables 3d acceleration for css movements on that element. — Graham Bass, Sep 25 '15 at 04:06
@GrahamBass, I have tried with translate3d(0,0,0) in my scrolling sections but no luck. — RGS, Sep 25 '15 at 06:08
@RGS, tried Android 4.3.1 with an emulator but didn't see any flickering. — Gyrocode.com, Sep 28 '15 at 22:04
Have you had a look at this thread? https://datatables.net/forums/discussion/15908/horizontal-and-vertical-scrolling-not-smooth-on-mobile-browsers-fixed-header-column — Cedric Reichenbach, Oct 01 '15 at 09:18
@CedricReichenbach, I had a look at that thread. Is it working solution? — RGS, Oct 01 '15 at 09:30
I can't tell, because I can't reproduce the issue on my phone. I guess it only affects older mobile browsers. — Cedric Reichenbach, Oct 01 '15 at 11:09
@CedricReichenbach, Yes, It is not working in old mobile browsers. — RGS, Oct 01 '15 at 11:19

Josip Ivic · Answer 1 · 2015-10-01T12:05:24.553

2

Try this if it works for you. It's the other way around, but it works. Maybe you'll just need to adjust width or whatsoever. Run it through jsFiddle to test it.

$.event.special.scrollstart = {
        enabled: true,

            setup: function() {
                var thisObject = this,
                    $this = $( thisObject ),
                        scrolling,
                        timer;

                function trigger( event, state ) {
                    scrolling = state;
                    var originalType = event.type;
                    event.type = scrolling ? "scrollstart" : "scrollstop";
                    $.event.handle.call( thisObject, event );
                    event.type = originalType;
                }


                $this.bind( scrollEvent, function( event ) {
                    if ( !$.event.special.scrollstart.enabled ) {
                        return;
                    }

                    if ( !scrolling ) {
                        trigger( event, true );
                    }

                    clearTimeout( timer );
                    timer = setTimeout(function() {
                        trigger( event, false );
                    }, 50 );
                });
            }
    };

Ok, if the flickering effect exists, try something like this. Your scroll is ok. It's the effect that sucks.

                document.getElementById("btn").addEventListener("click", function(){
                    var abc = document.getElementById("abc");
                    var def = document.getElementById("def");

                    abc.style["-webkit-transition-duration"] = "0ms";
                    def.style["-webkit-transition-duration"] = "0ms";
                    abc.style["-webkit-transform"] = "translate3d(0, 0, 0)";
                    def.style["-webkit-transform"] = "translate3d(100%, 0, 0)";
                    setTimeout(function(){
                        abc.style["-webkit-transition-duration"] = "1s";
                        def.style["-webkit-transition-duration"] = "1s";
                        abc.style["-webkit-transform"] = "translate3d(-100%, 0, 0)";
                        def.style["-webkit-transform"] = "translate3d(0, 0, 0)";
                    },
);
                });

edited Oct 01 '15 at 12:05

answered Oct 01 '15 at 11:30

Josip Ivic

3,639
9
39
57

Problem is not with the list, it's in this flickering effect. It was/still is some sort of bug. I updated my answer. Try it now. – Josip Ivic Oct 01 '15 at 12:02
ups, sry, I putted the line numbers when I cp-ed. – Josip Ivic Oct 01 '15 at 12:05
Is it possible to provide working example in fiddle? – RGS Oct 01 '15 at 14:33
I think not, because you need some sort of GUI to see flickering. – Josip Ivic Oct 01 '15 at 14:34
There is no solution for this issue? – RGS Oct 01 '15 at 14:37
I added the code that can bypass flickering effect. You need to test it to see if it works. – Josip Ivic Oct 01 '15 at 15:01
You need to put it into perspective of app that you are developing. I seriously doubt that you have 'abc' or 'def' in your code. I posted that for an example so you can guide yourself by it. – Josip Ivic Oct 01 '15 at 15:21
And how are you supposed to see the flickering effect? – Josip Ivic Oct 01 '15 at 15:32
I have seen the fiddle example in my androd Android 4.3 Jelly Bean version in Google chrome browser. – RGS Oct 01 '15 at 15:34
Kindly provide working solution in fiddle. If the demo fiddle working fine in mobile, I am ready to give bounty to you. – RGS Oct 01 '15 at 18:20
you need to put ID of the element that fired an event. You can use (this) to reference the object that fired the function. 'this' is a DOM element when you are inside of a callback function (in the context of jQuery), for example, being called by the click, each, bind, etc. methods. – Josip Ivic Oct 02 '15 at 07:41

How to fix scrollX movement issue in jQuery DataTables on mobile devices?

1 Answers1

Linked

Related