JSFiddle - React, Tailwind, and code Playground

HTML

<body onscroll="diagonale_scroll()">


<div id="pivote">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim vel nulla nec eleifend. Pellentesque vitae blandit eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce turpis ante, pretium ut commodo eget, venenatis sed orci. Fusce lacinia a risus ac maximus. Pellentesque eget dictum magna. Sed ut leo quam. Curabitur laoreet quam mauris, a semper turpis ullamcorper vel. Pellentesque vitae nunc et nisi ultricies vestibulum ac sit amet justo. Aenean ut dictum felis.
</p>
<p>
Sed ac vehicula purus. Pellentesque sollicitudin euismod velit ut facilisis. Pellentesque enim nisi, ullamcorper sit amet sem eu, hendrerit elementum tortor. In vehicula tortor eu metus maximus suscipit. Curabitur mauris metus, venenatis quis eleifend vel, placerat quis tellus. Suspendisse eu varius sem. Pellentesque feugiat varius sapien eget ornare. Mauris tempus sapien suscipit ante iaculis dapibus. Aliquam posuere maximus augue nec ultricies. Nullam lobortis, quam quis luctus dictum, orci lorem eleifend metus, sed blandit neque tortor eu massa. Morbi augue enim, lacinia ut massa non, consectetur porta neque. Integer euismod urna sit amet euismod vulputate. Nulla bibendum lectus non nulla iaculis euismod. Pellentesque eu augue ut ante vehicula consequat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim vel nulla nec eleifend. Pellentesque vitae blandit eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce turpis ante, pretium ut commodo eget, venenatis sed orci. Fusce lacinia a risus ac maximus. Pellentesque eget dictum magna. Sed ut leo quam. Curabitur laoreet quam mauris, a semper turpis ullamcorper vel. Pellentesque vitae nunc et nisi ultricies vestibulum ac sit amet justo. Aenean ut dictum felis.
</p>
<p>
Sed ac vehicula purus. Pellentesque sollicitudin euismod velit ut facilisis....

CSS

body, p , div {
  margin:0px;
  overflow-x:hidden;
  padding:0px;
}

#pivote {
   background: purple;
   transform: rotateZ(45deg);
   transform-origin:top left;
   position:absolute;
   left:50vw;
   width:50vw;
}

p{   
   background-color: green;
}

JavaScript

function diagonale_scroll()
{
document.getElementById("pivote").style.left=(50+(window.scrollY / (document.documentElement.scrollHeight - document.documentElement.clientHeight))*100)+"vw";
}