There are two elements with different lengths; when dragging, the top bottom should be mixed so fast that by the end of the top one, the bottom one also reaches its edge, I understand that the distance posdd passed by the bottom proportionally depends on the difference in length between the top pos * (widthChdd / widthCh), I tried to insert it into the code, but something goes wrong
position = false; var startx = 0; var prev_x = 0; //предыдущее значение var direction = true; // направление function SCREENmove() { width = document.documentElement.clientWidth; height = document.documentElement.clientHeight; //измеряю ширину элементов чтобы запретить им отлипать от границы родителя widthP = $('.parrent').width(); widthCh = $('.child').width(); widthChdd = $('.childd').width(); pos = $('.child').offset().left; posdd = $('.child').offset().left; } $(window).resize(SCREENmove); $(document).ready(SCREENmove); $('.parrent').mousedown(function(event) { position = true; startx = event.clientX; }) $(document).mouseup(function() { position = false; }) document.onmousemove = mousemove; function mousemove(event) { if (position) { mouse_x = y = 0; if (document.attachEvent != null) { mouse_x = window.event.clientX; } else if (!document.attachEvent && document.addEventListener) { mouse_x = event.clientX; } // проверяю, изменилось ли направление, и если да, старт с этого места if (direction != (prev_x > mouse_x)) { startx = mouse_x } direction = prev_x > mouse_x prev_x = mouse_x; // проверяю, не превышает ли отступ ширины родителя mx = mouse_x - startx; if ((pos + mx / 20) > 0) { pos = 0; } else if ((pos + mx / 20) < (widthP - widthCh + 8)) { pos = widthP - widthCh + 8 } else { pos = pos + mx / 20 } //пробую пропорционально смещать нижний элемент относительно смещения верхнего if ((posdd + mx / 20) > 0) { posdd = 0; } else if ((posdd + mx / 50) < (widthP - widthChdd + 8)) { posdd = widthP - widthChdd + 8 } else { posdd = pos * (widthChdd / widthCh) //попробовал пропорционально сместить нижний относительно верхнего } $('.child').css('transform', 'translateX(' + pos + 'px)'); $('.childd').css('transform', 'translateX(' + posdd + 'px)'); } } .block { display: inline-block; height: 100px; background: #8BC34A; margin: 2px; } .childd .block { background: #D81B60; } .parrent { display: block; position: relative; width: 600px; overflow: hidden; padding: 0 10px; border: 2px solid red; padding-bottom: 100px; -moz-user-select: none; -khtml-user-select: none; user-select: none; cursor: move; } .child, .childd { display: inline-flex; width: auto; overflow: hidden; /*transform: translateX(-394px);*/ } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> <div class="parrent"> <div class="child"> <div class="item-1 block" style="width: 100px">1</div> <div class="item-2 block" style="width: 120px">2</div> <div class="item-3 block" style="width: 300px">3</div> <div class="item-4 block" style="width: 70px">4</div> <div class="item-5 block" style="width: 150px">6</div> <div class="item-6 block" style="width: 200px">7</div> </div> <div class="childd"> <div class="item-1 block" style="width: 200px">1</div> <div class="item-2 block" style="width: 120px">2</div> <div class="item-3 block" style="width: 300px">3</div> <div class="item-4 block" style="width: 70px">4</div> <div class="item-5 block" style="width: 350px">6</div> <div class="item-6 block" style="width: 200px">7</div> </div> </div> 