Zebra_Pin
Zebra_Pin copied to clipboard
No resize/update is captured when a scrollbar appears after initialization
Hello, I noticed an issue if you initialize zebra pin, and then the viewport width changes as a result of a scrollbar appearing. This can happen if something else on the page loads content via ajax or dynamic content.
A window.onresize
event does not occur in this case; and this results in a slightly incorrect width on a zebra pin element.
You can observe the behavior/issue in this pen example (notice how the width is visibly different when it is pinned): https://codepen.io/adamcoulombe/pen/BapVRaL
It isn't practical in every scenario to manually update the zebra pin after ajax load. There could also be other factors that might cause this to occur beside just ajax.
I found a solution that I have implemented on my fork, and I wanted to share it. It could potentially be worked into this library, it is a little hacky though.
It involves adding a 100% width invisible iframe to the document and listening its resize event, then dispatching a resize event to the window
if it occurs, the concept is described here:
https://stackoverflow.com/questions/2175992/detect-when-window-vertical-scrollbar-appears