创建具有在中心对齐的特定元素的响应式容器

Question

有3个ul容器，ul.spread-price夹在ul.table-sell和ul.table-buy容器之间，这三个容器包装在其他容器中（例如：div.order-view-container）。在特定时间，ul.spread-price容器应位于中间，ul.table-sell和ul.table-buy容器上下分别具有滚动效果。

案例1：

当我滚动ul.table-sell时，ul.spread-container到达div.order-view-container的顶部触及它并在ul.spred底部有ul.table-sell内容滚动效果-价钱。 **

案例2：

**当我滚动ul.table-买了ul.spread-容器到达div.order-view-container的底部触摸它并在ul顶部有ul.table-buy内容滚动效果.spred价格。

目前我已经在大屏幕1920 x 1080中实现了这一点。但是同样不适用于所有设备。此处的图像描述

$(document).ready(function(){
        //Function to check when window is resized
        $(window).resize(function(){
            $("ul.spread-price").css('width', $('.order-view-scrollable').width());
        });

        var scrollDivHeight = $('.order-view-scrollable .scrollingdiv').height();
        console.log("scrollDivHeight :"+scrollDivHeight);
        var scrollDivWidth = $('.order-view-scrollable').width();
        var setTopHeight = scrollDivHeight/2;

        $("ul.spread-price").css('width', $('.order-view-scrollable').width());
        $('.order-view-scrollable .scrollingdiv').scrollTop(setTopHeight);

        $(".spread-price").click(function(){
            var scrollDivHeight = $('.order-view-scrollable .scrollingdiv').height();
            var scrollDivWidth = $('.order-view-scrollable').width();
            var setTopHeight = scrollDivHeight/2;
            alert("scrollDivHeight :"+scrollDivHeight+"<br>setTopHeight :"+setTopHeight);
            $('.order-view-scrollable .scrollingdiv').scrollTop(setTopHeight);

        });
    });