JSFiddle - React, Tailwind, and code Playground

by ponyspy

HTML

<div id="scrollme">
    <div>
       Привет! Меня зовут Саня, и я вижу будущее. Вы только не подумайте: я не какой-нибудь там маг-экстрасенс пятой категории гильдии Ардуины второго пришествия. Я действительно вижу будущее, когда сосредоточусь. Я не знаю, кто посылает мне эти видения: бородатый дядька на небе, аццкий сцотона, или дух Ричарда Фейнмана просачивается сквозь швы пространства-времени и подсовывает мне в голову эти картинки. Я также не знаю, как вся эта бодяга согласуется с многомировой теорией, принципом неопределённости Гейзенберга и пророчеством Ванги.

Многие спросят: «Эй чувак! Если ты действительно видишь будущее, то какого чёрта ты тратишь время на пост в хабр вместо того, чтобы спасать мир?!» Проблема в том, что я не вижу глобальных событий. Я не могу предсказать эпидемию или войну; не могу знать о том, что Северная Корея запустит ядерную ракету; даже вымирание популяции бородатых хомячков в африканских саваннах я не могу предотвратить. Вот я и решил устроиться на работу, где мои скромные умения точно пригодятся.

День первый

Чёрт, быть тестировщиком в крупной компании так круто! Всё началось с того, что охранник на проходной устроил мне перекрёстный допрос с применением техник подавления сознания, а потом ещё и обыскал мою сумку, уделяя особое внимание «подозрительному» шву в левом верхнем кармашке. Сразу видно, что это серьёзная компания, которая заботится о безопасности своих сотрудников! Когда я, наконец, поднялся на свой этаж, мне показали стол в огромном опенспейсе и тут же выдали компьютер. Человек, который привёл меня к рабочему месту, сказал на прощание: «Сиди здесь, с тобой свяжутся», и в одно мгновение растворился в воздухе. Ого, я должен научиться этому крутому офисному ниндзюцу! С нетерпением жду, когда со мной свяжутся.

День второй

За целый день со мной так и не связались. Мне начинает казаться, что про меня забыли. Я решил немного напрячься, и увидеть, где сейчас находится вчерашний офисный ниндзя. Оказалось, что он уже сорок...

CSS

#scrollme {
    width: 200px;
    height: 300px;
    overflow: hidden;
    border: 1px solid #ccc;
}

JavaScript

function normalize_mousewheel(e) {
    var o = e.originalEvent,
        d = o.detail, w = o.wheelDelta,
        n = 225, n1 = n-1, f;
    
    d = d ? w && (f = w/d) ? d/f : -d/1.35 : w/120;
    d = d < 1 ? d < -1 ? (-Math.pow(d, 2) - n1) / n : d : (Math.pow(d, 2) + n1) / n;
    
    return 10 * Math.min(Math.max(d / 2, -1), 1);
}


$('#scrollme').on('wheel mousewheel onmousewheel DOMMouseScroll', function(e) {
    var $this = $(this);
    var normalize = $this.scrollTop() - normalize_mousewheel(e);
    $this.scrollTop(normalize);
});