JSFiddle - React, Tailwind, and code Playground

HTML

<textarea name="" id="source">
#Os problemas de design do novo padrão de navegação da Globo.com
    
## Introduzido no topo das páginas do G1 e do Globo Esporte, o novo menu está longe de ser uma solução ideal para os milhões de usuários diários do portal
    
A [Globo.com](http://globo.com) sempre esteve à frente no que diz respeito a soluções de design para sites informativos, tanto que dita tendência até hoje para portais brasileiros. Desde como é organizada a estrutura da informação, quanto à adoção de padrões visuais que viraram o senso comum de vários portais do país. Nos últimos dias eles publicaram o novo modelo de navegação do portal e acabei percebendo alguns problemas.
    
###O *mobile first* que não funciona em mobile
    
Não tenho acesso a dados estatísticos das plataformas mais usadas para acessar o portal. Porém levando em consideração estatísticas gerais, imagino que o aumento do acesso por tablets e smartphones tenha sido o grande motivo para que a nova navegação fosse criada com a filosofia mobile first. Mas três coisas não fazem sentido:
1. As páginas iniciais e de cada notícia do G1 ou Globo Esporte (onde o menu está sendo usado) não são responsivas. Apesar da homepage da globo.com ser.
2. Existe uma versão exclusiva mobile dos sites em m.globo.com, m.g1.globo.com e m.globoesporte.globo.com com outro padrão de navegação.
3. A nova navegação, apesar de ser responsiva, não suporta touch events.
    
Isso quer dizer que ao tentar entrar no portal usando um tablet, você não vai conseguir usar a navegação **principal**. Mas veja primeiro o comportamento no desktop.</textarea>
<div id="target">
     <h1>Os problemas de design do novo padrão de navegação da Globo.com</h1>

     <h2>Introduzido no topo das páginas do G1 e do Globo Esporte, o novo menu está longe de ser uma solução ideal para os milhões de usuários diários do portal</h2>

    <p>A <a href="http://globo.com">Globo.com</a> sempre esteve à frente no que diz respeito a soluções de design...

CSS

#source {
    position:fixed;
    left:0;
    top:0;
    width:50%;
    height:100%;
    background:#eee;
    border:none;
    outline:none;
    padding:10px;
    box-sizing:border-box;
}
#target {
    position:fixed;
    right:0;
    top:0;
    width:50%;
    height:100%;
    padding:10px;
    box-sizing:border-box;
    overflow-y:scroll;
}

JavaScript

(function () {
    var target = $("#target")[0]; // <== Getting raw element
    $("#source").scroll(function () {
        target.scrollTop = this.scrollTop;
        target.scrollLeft = this.scrollLeft;
    });
})();