All geek questions in one place

Scrollable table sorting. How to suppress artifacts of horizontal movement of the scroll position to maintain the scroll position?

I want to sort a table that can be scrolled horizontally, since the table is wider than the browser width. I am using PHP / JS but not using AJAX.

The problem is when I scroll to the right to sort in the rightmost column, I need to keep the horizontal scroll position when sorting.

I did to fake the position, first using JS to go to the position. But this happens after the page loads. Therefore, I see a "translation".

So, to fake it, I used css to immediately translate (convert) the element to the right. Then, when the pages load, I immediately translate left to JS (using the css transform to restore the position), then I use JS to scroll to the desired position.

Firefox and Edge have no problems with this, and they do not show any intermediate translation flex or artifacts.

Only my IE 11 shows a translation artifact on page load.

How to suppress this flicker effect in IE, so that the user only sees the sorting of the table in the right place?

I provided some code in an earlier post

How to prevent page flickering in IE that is not displayed in Firefox?

+4
source share
1 answer

, jquery css, , css.. jquery. css, , .

<!--[if IE]>
<meta http-equiv="Page-Enter" content="blendTrans(duration=0)" />
<meta http-equiv="Page-Exit" content="blendTrans(duration=0)" />
<![endif]-->
+1

Source: https://habr.com/ru/post/1656840/

More articles:


All Articles