0

Please have a look at this fiddle. Code is huge to post.

I am trying to make two DIVS stick to the top and left inside a dynamically updated DIV. It is working but flickering is happening inside the DIV. How can I remove the flickering.

Please help me on this.

Code written to fix: 

 colFix.style.left = (holder.scrollLeft - view.offsetLeft) + "px";
 heaF.style.top = (holder.scrollTop - view.offsetTop) + "px";
Exception
  • 8,111
  • 22
  • 85
  • 136
  • take a look at this [positioning][1] [1]: http://stackoverflow.com/questions/1216114/how-can-i-make-a-div-stick-to-the-top-of-the-screen-once-its-been-scrolled-to – Milad Hosseinpanahi Sep 01 '13 at 07:39
  • 1
    I think you're overdoing this. 1. That's a tabled data you've got there. Why aren't you using a real table? 2. Maybe this thread will help you http://www.imaputz.com/cssStuff/bigFourVersion.html – Itay Sep 01 '13 at 07:40
  • Your fiddle is way too full of code and you haven't specified what we're supposed to look at in the example. – Geuis Sep 01 '13 at 07:42
  • @Geuis In the fiddle from line number 104 - 119 I am appending sticky headers. – Exception Sep 01 '13 at 07:55
  • @user2675751 I am looking for the same and doing the same code here also, I would like to avoid the flickering happening. – Exception Sep 01 '13 at 07:57
  • @YuriyGalanter Currently I did the same thing I guess.. It also has to align with the data displayed.. – Exception Sep 03 '13 at 16:37
  • @Itay I am doing what my requirement is, and the link you have provided, that table alignment is gone after just few scrolls. – Exception Sep 08 '13 at 04:30

2 Answers2

8

The flashing you are seeing is because your elements are reinserted into the DOM. In this case, and specifically in IE10, they flash from the bottom to the top because you use .appendChild, so it renders at the bottom of the page then flashes to the top once the CSS applies.

The flashing from bottom to top can be fixed by using .insertBefore:

view.insertBefore(colFix, view.firstChild);

This does not fix the problem entirely, as it will continue to flash every time it is reinserted - just at the top now.

One way to stop the flashing is to stop reinserting the entire block, but keep a wrapper in place which has its content re-populated. This may still cause a visible jump, but I leave that to you to experiment.

Previous experimentation below, kept for the sake of others who may try and answer. The above provides the answer to the core question of "How can I remove the flickering" - i.e. stop continuously reinserting layout elements.

Here is a fiddle

This changed #col-fixed and #head-fixed to position: fixed; and then in the javascript I changed lines where you appendChild to insertBefore the first child - this may not have any relevance once position: fixed was applied.

view.appendChild(heaF);

view.insertBefore(colFix, view.firstChild);

I also commented out:

colFix.style.left = colHF.style.left = (holder.scrollLeft - view.offsetLeft) + "px";
heaF.style.top = colHF.style.top = (holder.scrollTop - view.offsetTop) + "px";
Ross
  • 3,022
  • 1
  • 17
  • 13
  • Disadvantage with `fixed` here is, I will not be able to scroll putting mouse on Fixed element. Next is it will position according to the screen, extra effort needed to make it aligned with the element on resize of window – Exception Sep 03 '13 at 18:52
  • So from what I think I understand from your code (which could be very wrong, sorry) is that you replace the entire absolutely positioned div and add it back in on scroll. If that's the case, then I would try only replacing the content of the absolutely positioned div. Did that make sense? – Ross Sep 03 '13 at 19:04
  • You are right that the best option is to keep the container and replace the children. The other alternatives you mention cause a reflow, which is part of the FOUC that is happening. – Jason Sep 06 '13 at 22:35
1

You can try using iScroll plugin. link .

This will keep the scroll bar and that too with no flickers but, for this to work you will need to have two divs. Have a look into this example.

Also if not reusing iScroll,you can modify the code on similar to iScroll (removing not-required features).

Example link :- a link

user2350626
  • 71
  • 4