如何防抖动？

Question

js控制元素的通过增加和删除类（class = hide）来达到元素的显示和隐藏，却导致页面的抖动。

猜测是滚动条导致的的抖动？

还有出现闪动的不好效果？

我该如何实现？

（所需效果：页签的切换，js实现。）

Answer 1

首先你猜的没错，是滚动条导致的。因为你元素显示的时候页面高度假设是1000，然后你的滚动条滚到了500的地方【即scrollTop=500】，这时候你隐藏元素，页面高度变为500，滚动条已经不可能是500了，那么就浏览器就重置了这个值，这时候就会抖动。知道了原因就有方法来解决问题了，可以再隐藏元素的时候不真正隐藏，只是把透明度设为0，这样它仍然占据页面空间，就不会导致滚动条重置而抖动，不过，显然这种方法很鸡肋，当你隐藏元素的下方没有其他内容时可考虑采用。其实比较好的方法是用过渡动画来避免突然抖动带来的不好效果，因为页面已经没有那么多东西了，滚回去很正常，但是可以用一些动画效果来使得其体验好一点。