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

有3个ul集装箱，ul。价差夹在ul.table-sell和ul.table-buy集装箱之间，这三个集装箱包装在其他集装箱内（例如：div.order-view-container）。在特定的时间实例中，U.Excel价格容器应该在UL.Table Surt和UL.TabelYuy容器的中间，分别具有滚动效果。 案例1: 当我在ul.table-sell上滚动时，ul.spread-container到达div.order-view-container的顶部，触摸它并在ul.spred-price的底部具有ul.table-sell内容滚动效果。 **

案例2： **当我在ul.table-buy上滚动时，ul.spread-container到达div.order-view-container的底部，触摸它并在ul.spred-price的顶部具有ul.table-buy内容滚动效果

目前我已经在大屏幕1920 x 1080上实现了这一点。但并非所有设备都是如此。请在此处输入图像描述

$（文档）.ready（函数（）{
//用于检查窗口何时调整大小的函数
$（窗口）。调整大小（函数（）{
$（“ul.spread price”）.css（'width'，$（'order view scrollable'）.width（））；
});
var scrollDivHeight=$（'.order view scrollable.scrollingdiv'）.height（）；
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”）。单击（函数（）{
var scrollDivHeight=$（'.order view scrollable.scrollingdiv'）.height（）；
var scrollDivWidth=$（'.order view scrollable'）.width（）；
var setTopHeight=scrollDivHeight/2；
警报（“scrollDivHeight:+scrollDivHeight+”
setTopHeight:+setTopHeight）；
$（'.order view scrollable.scrollingdiv'）.scrollTop（setTopHeight）；
});
});

你能发布你的

HTML

和

CSS

并创建一个@IvanModric好的，我会做的，还在等小提琴；）@IvanModric很抱歉这么说，但实际上有很多html、css样式应用于此。它们之间存在内在的相互关联。你能给我一个主意吗？怎样才能做到。我希望你明白我的问题。如果你需要，请告诉我。@IvanModric我已经解决了我的问题。无论如何，谢谢你的关心。

$(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);

        });
    });