title: Putting two different scroller in a youtube page to make improved custom UI experience
body: <p>Aim: As we scroll the youtube on browsers, the whole page scrolls down, I want to create two scrollers: </p>
  
  <ol>
  <li>Left one for video and comment scrolling.</li>
  <li>Right one for Up next(suggested videos) scrolling.</li>
  </ol>
  
  <p>I found out we can do that with <code>overflow: scroll;</code><a href="http://jsfiddle.net/shubham27822/wQ6WQ/1165/" rel="nofollow noreferrer">shown in this JSfiddle</a></p>
  
  <p>Take example: <a href="https://www.youtube.com/watch?v=xcJtL7QggTI" rel="nofollow noreferrer">Sample Youtube video</a> </p>
  
  <p>If you inspect these are the two columns:
  <img src="https://i.stack.imgur.com/4CSls.png" alt="left and right column div elements"></p>
  
  <p><img src="https://i.stack.imgur.com/6dcPo.png" alt="visual representation of left column"></p>
  
  <p><img src="https://i.stack.imgur.com/5UvFB.png" alt="visual representation of right column"></p>
  
  <p>However, when I apply the style property there (overflow:scroll). Its not applied.</p>
  
  <p>Since Its a dynamic page, I wanted to make a chrome extension that will do this job, but I don't know how to begin?</p>
  
  <p><strong>Update</strong> : Locally->
  <img src="https://i.stack.imgur.com/uSvhl.png" alt="enter image description here"></p>
  
  <p>Not working by cut-paste in live page:
  <img src="https://i.stack.imgur.com/vod9C.png" alt="enter image description here"></p>