JSFiddle - React, Tailwind, and code Playground

by Alex

HTML

<div class="columns">
    <div class="column"><p>Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца. Я совсем один и блаженствую в здешнем краю, словно созданном для таких, как я. Я так счастлив, мой друг, так упоен ощущением покоя, что искусство мое страдает от этого. Ни одного штриха не мог бы я сделать, а никогда не был таким большим художником, как в эти минуты.и</p>
</div>
    <div class="column"><p>Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца. Я совсем один и блаженствую в здешнем краю, словно созданном для таких, как я. Я так счастлив, мой друг, так упоен ощущением покоя, что искусство мое страдает от этого. Ни одного штриха не мог бы я сделать, а никогда не был таким большим художником, как в эти минуты. Когда от милой моей долины поднимается пар и полдневное солнце стоит над непроницаемой чащей темного леса и лишь редкий луч проскальзывает в его святая святых, а я лежу в высокой траве у быстрого ручья и, прильнув к земле, вижу тысячи всевозможных былинок и чувствую, как близок моему сердцу крошечный мирок, что снует между стебельками, наблюдаю эти неисчислимые, непостижимые разновидности червяков и мошек и чувствую близость всемогущего, создавшего нас по своему подобию, веяние вселюбящего, судившего нам парить в вечном блаженстве, когда взор мой туманится и все вокруг меня и небо надо мной запечатлены в моей душе, точно образ возлюбленной, - тогда, дорогой друг, меня часто томит мысль: "Ах! Как бы выразить, как бы вдохнуть в рисунок то, что так полно, так трепетно живет во мне, запечатлеть отражение моей души, как душа моя - отражение предвечного бога!" Друг
Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца. Я совсем один и блаженствую в здешнем краю, словно созданном для таких, как я. Я так счастлив, мой друг, так упоен ощущением покоя, что искусство мое страдает от этого. Ни...

CSS

.columns {
    overflow: hidden;
}
.column,
.column2{
    float: left;
    width: 200px;
    height: 250px;
    margin: 10px;
    border: 1px solid #f0f0f0;
    overflow: auto;
}
p {
    padding: 10px;
    margin: 0;
}

JavaScript

$('.column').on({
    scroll: function(){
        if($(this).is('.scrolling')){
            var koef = parseFloat($(this).scrollTop()/
                              ($(this).find('p').outerHeight() - 
                               $(this).height())).toFixed(5);
            console.log(koef);
            var obj_depend = $('.column').not($(this));
            obj_depend.each(function(){
                $(this).scrollTop(($(this).find('p').outerHeight() - 
                               $(this).height()) * koef);
            });
        }
    },
    mousedown: function(){
        $(this).addClass('scrolling');
    },
    mouseup: function(){
        $(this).removeClass('scrolling');
    }
});