JSFiddle - React, Tailwind, and code Playground

by GmanG

HTML

<div id="main">
    <div id="content">
        <div id="one" class="vis">1</div>
        <div id="two" class="vis">2</div>
        <div id="three" class="vis">3</div>
        <div id="four" class="vis">4</div>
        <div id="five" class="vis">5</div>
        <div id="six" class="vis">6</div>
        <div id="seven" class="vis">7</div>
        <div id="eight" class="vis">8</div>
    </div>
</div>

CSS

#main {
    border: 1px solid black;
    width: 400px;
    height: 400px;   
    background-color:#cdcdcd;
    overflow: auto;
}

#content {
    width: 10000px;
    height: 400px;
    /* background-color: red; */
}

.vis {
    width: 400px;
    height: 400px;
    border: 1px solid black;
    display: inline-block;
}

JavaScript

var prev_id;

$('#main').scroll(function(){
    
    var element_width = 400;
    var offset = $('#content').offset();
    var positive =  Math.abs(offset.left)
    var divided = positive / element_width;
    var round = Math.round(divided);

    var current_element = $('#content').children().eq(round);
    var id = current_element.attr('id');

    if(id != prev_id){
    prev_id = id;
    console.log(id);
    }

});