JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div id="minhaDiv">
        <button class="baixo" type="button">Ir para baixo...</button>
        <p>conteudo................. mais conteudo................ mais conteudo................ mais conteudo................ mais conteudo................ mais conteudo................ mais conteudo................ mais conteudo................ mais conteudo................ mais conteudo................ mais conteudo................ mais conteudo................ mais conteudo................ mais conteudo................ mais conteudo................ mais conteudo................ mais conteudo................ mais conteudo................ mais conteudo................ mais conteudo</p>
        <button class="baixo" type="button">Ir para baixo...</button>
        <p>conteudo................. mais conteudo................ mais conteudo................ mais conteudo................ mais conteudo................ mais conteudo................ mais conteudo................ mais conteudo................ mais conteudo................ mais conteudo................ mais conteudo................ mais conteudo................ mais conteudo................ mais conteudo................ mais conteudo................ mais conteudo................ mais conteudo................ mais conteudo................ mais conteudo................ mais conteudo</p>
        <button class="baixo" type="button">Ir para baixo...</button>
        <p>conteudo................. mais conteudo................ mais conteudo................ mais conteudo................ mais conteudo................ mais conteudo................ mais conteudo................ mais conteudo................ mais conteudo................ mais conteudo................ mais conteudo................ mais conteudo................ mais conteudo................ mais conteudo................ mais conteudo................ mais conteudo................ mais conteudo................ mais conteudo................ mais...

CSS

* {
    margin: 0px;
    padding: 0px;
    overflow: hidden;
}
#wrapper {
    position: absolute;
    height: 100%;
    width: 100%;
}
#minhaDiv {
    transition: top 1s ease-in-out;
    position: relative;
    height: 400px;
}

JavaScript

var minhaDiv = document.getElementById('minhaDiv');
var wrapper = document.getElementById('minhaDiv');

function fazerScroll(event) {

    var posicaoAtual = parseInt(minhaDiv.style.top, 10) || 0;
    var alturaDiv = minhaDiv.getBoundingClientRect().height;
    console.log(alturaDiv, posicaoAtual);
    
    var div = event.target,
        direcao;

    // roda mouse
    var direcaoRoda = event.wheelDelta ? event.wheelDelta : -(event.deltaY ? event.deltaY : event.detail);
    if (event.type == 'wheel') direcao = direcaoRoda > 0 ? 1 : -1;


    // botoes
    if (!direcao) direcao = ~div.className.indexOf('cima') ? 1 : -1;
    if (posicaoAtual >= 0 && direcao == 1) return;
    if (posicaoAtual - 200 < -alturaDiv && direcao == -1) return;
    minhaDiv.style.top = (posicaoAtual + (100 * direcao)) + 'px';
}
var botoes = document.querySelectorAll('button');
for (var i = 0; i < botoes.length; i++) {
    botoes[i].addEventListener('click', fazerScroll);
}
window.addEventListener('wheel', fazerScroll);
minhaDiv.style.top = '0px';