Skip to content

Instantly share code, notes, and snippets.

@myfonj
Created September 30, 2020 12:21
Show Gist options
  • Save myfonj/1fe79f9f94c4aa9052c4458f19dc5d18 to your computer and use it in GitHub Desktop.
Save myfonj/1fe79f9f94c4aa9052c4458f19dc5d18 to your computer and use it in GitHub Desktop.
horizontal scroll offender analysis
console.log([].filter.call(document.all,(e,c)=>(e.getBoundingClientRect().right+parseFloat((c=getComputedStyle(e)).marginRight)*!(c.position=='absolute'))>document.documentElement.offsetWidth))
data:text/html;charset=utf-8,<!DOCTYPE html><title>horizontal scroll offender analysis @ HTML sandbox 1.0.7</title><style>*{box-sizing:border-box;width:100vw;height:100vh;margin:0}[id]{border:inset;width:50vw;float:left}</style><body onload=A.value=decodeURIComponent((L=location).hash.slice(1)||'');T=W=0;E=RegExp('^'+(D='data:text/html;charset=utf-8,'));F=function(){if(W!=(V=A.value))W=V,M=V.match(/(^data:.+?,)?([^]*)/),I.src=(M[1]||D)+M[2].replace(/[\0-\40\43\45]/g,encodeURIComponent)};F()%3E%3Ctextarea autofocus id=A onkeyup=clearTimeout(T);T=setTimeout(F,400) onblur=L.hash=I.src.replace(E,'')%3E%3C/textarea%3E%3Ciframe id=I%3E#%0A%0A<p>.<b style="width: 101%25;display: block"></b>%0A%0A<p>.<b style="margin-left: 101%25"></b>%0A%0A<p>.<b style="position: absolute; left: 101%25"></b>%0A%0A<p>.<b style="position: absolute; left: 50%25; margin-left:100%25;"></b>%0A%0A<p>.<b style="position: absolute; left: 100%25; margin-left: -100%25; margin-right: 50%25"></b>%0A%0A<p>. this one should be ok%0A%0A<style>%0Ap { position: relative; padding-left: 50%25; }%0Ab::before{ content: attr(style); white-space: nowrap}%0A%0Abody { height: 10000px; }%0A</style>%0A<script>%0A%0Aconsole.log([].filter.call(document.all,(e,c)=>(e.getBoundingClientRect().right+parseFloat((c=getComputedStyle(e)).marginRight)*!(c.position=='absolute'))>document.documentElement.offsetWidth))%0A%0A%0A</script>%20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment