JSFiddle - React, Tailwind, and code Playground

by Maxim

HTML

<div class="container">
    <div class="container-wrap">
    <div class="form-container">
        <div class="form"></div>
    </div>
    <div class="form-container">
        <div class="form"></div>
    </div>
    <div class="form-container">
        <div class="form"></div>
    </div>
    <div class="form-container">
        <div class="form"></div>
    </div> 
     <div class="form-container">
        <div class="form"></div>
    </div>  <div class="form-container">
        <div class="form"></div>
    </div> 
    </div>

</div>

CSS

.container{
    overflow:hidden

}
.container-wrap {
    width: 9999px;
}
.form-container{
    width: 200px;
    height: 50px;
    float: left;
     margin-left: 20px;
}
.form{
    background-color: blue;
    height: 30px;
    width: 100%;
   
    border:  1px solid gray;
    display: inline-block;
    
}

JavaScript

$('.container').mousedown(function(event){
        $clientsCords=event.clientX;
        newCords=$().getMouseCords();
        myFunc(event);
        function myFunc (event){

            $('.container').scrollLeft($clientsCords-newCords )
            console.log(newCords);
            

        }

	});
// думаю ошибка здесь
$.fn.getMouseCords=function(){
        $(document).mousemove(function(event){
           return event.clientX;
              
        })
    };