JSFiddle - React, Tailwind, and code Playground

by Tentonaxe

HTML

<input type="text" id="search-text">
<div id="spacer"></div>

CSS

body{
    background-color: red;
}

#height-helper{
    background-color: green;
}

#spacer{
    height: 1500px;
}

JavaScript

var scrollLocked = false;

$(document).on('focus', '#search-text', function(){
    if (!scrollLocked){
        scrollLocked = true;
        $('body').wrapInner(
            $('<div id="height-helper"/>').css({
                height: 300,
                overflow: 'hidden'
            })
        );
        $(this).focus();
    }
});

$(document).on('blur', '#height-helper #search-text', function(){
    console.log('blur');
    $('#height-helper').contents().unwrap();
    scrollLocked = false;
});