Horizontal scroll is jumpy on a mobile device

fredrik_dealbuilder

Hi,

With scrollx set to true, horizontal scrolling seems to work fine on a desktop. On a mobile it's very "jumpy". It's like the header is lagging behind when you scroll.
As an example you can look at this page in a mobile: https://datatables.net/examples/basic_init/scroll_x.html

I've tried a work around that means not setting scrollX but adding this to options:
"initComplete": function (settings, json) { $(tableSelector).wrap("<div style='overflow-x:auto; width:100%;position:relative;'></div>"); },

This however gives me other problems, like bootstrap drop downs are activating the scroll bars and scroll bars always being visible because the width seems to be set to the wrong value.

Is there a good solution/workaround to this issue?

Kind Regards
Fredrik Dahlberg

fredrik_dealbuilder

Deleted comment

fredrik_dealbuilder

''' "initComplete": function (settings, json)
{
$(tableSelector).wrap("

");
''' },

fredrik_dealbuilder

I don't get it. My html code dissappears... ONe more try...
"initComplete": function (settings, json) { $(tableSelector).wrap("<div style='overflow-x:auto; width:100%;position:relative;'></div>"); }

colin

I just tried that example you linked to on an Android Samsung S21, and that's scrolling smoothly as expected. Are you seeing the issue with that example, or your dataset? And what OS/browser are you using?

Colin