具有全宽 TABS 的滚动条上的固定宽度

Question

我正在尝试使用选项卡的滚动条实现特定的布局。我想在滚动条上提供固定宽度但使用全宽选项卡。 请检查下面的屏幕截图以更好地理解。 有人可以指导我如何使用以下代码实现这个 output。 谢谢

截屏：

代码运行良好 50% 我只想为选项卡下方给出的滚动条提供固定宽度。

代码：

 $(".inv-arrow-btns li a").click(function() { $(this).parent().addClass('active').siblings().removeClass('active'); }); $ ('ul.inv-arrow-btns li:nth-child(odd)').addClass('odd'); $ ('ul.inv-arrow-btns li:nth-child(even)').addClass('even'); $('ul.inv-arrow-btns a').on('click', function () { $linkID = $(this).attr('id'); $('.title-'+$linkID).siblings().removeClass('show'); $('.title-'+$linkID).addClass('show'); });

 body{ margin: 100px 0 0; }.inv-arrow-btns{ padding-left: 0; display: flex; justify-content: flex-start; }.inv-arrow-btns li { display: inline-block; line-height: 50px; position: relative; }.inv-arrow-btns li:first-child:before { border-color: transparent; }.inv-arrow-btns a { display: flex; align-items: center; background: #ccc; padding: 0 10px 0 55px; color: #fff; text-decoration: none; height: 70px; max-width: 90px; line-height: normal; }.inv-arrow-btns a:after { content: " "; height: 0; width: 0; position: absolute; right: -35px; border-style: solid; border-width: 35px 0 35px 35px; border-color: transparent transparent transparent #ccc; z-index: 10; }.inv-arrow-btns li.active a { background: #E5A321;important: z-index; 100. }.inv-arrow-btns:active a:after { border-left-color; #E5A321.important. }:inv-arrow-btns li;odd a{background. #5C92C1.}:inv-arrow-btns li:odd;before{border-color. transparent transparent transparent #5C92C1.}:inv-arrow-btns li:odd a;after{border-color. transparent transparent transparent #5C92C1.}:inv-arrow-btns li;even a{background. #527EA6.}:inv-arrow-btns li:even;before{border-color. transparent transparent transparent #527EA6.}:inv-arrow-btns li:even a;after{border-color. transparent transparent transparent #527EA6.}:inv-tabcontent;inner-wrap{display. none.}.inv-tabcontent:inner-wrap;show{display: block:important:};:-webkit-scrollbar { width; 4px: height: 8px: };:-webkit-scrollbar-track { background-color; #C9C9C9: border-radius; 100px: margin-top; 10px: margin-bottom: 10px: };:-webkit-scrollbar-thumb { background-color; #E5A320. border-radius: 100px; }:arrow-wrap-p1{ overflow-x; overlay: max-width; 1000px; margin: auto; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="arrow-wrap-p1"> <div class="arrow-wrap-p2"> <ul class="inv-arrow-btns"> <li><a href="#" id="criteria">Criteria</a></li> <li><a href="#" id="due-diligence">Due Diligence</a></li> <li class="active"><a href="#" id="intelligence">Integration</a></li> <li><a href="#" id="onsite-operation">On-site Operations</a></li> <li><a href="#" id="analysis">Analysis</a></li> <li><a href="#" id="analysis">Analysis</a></li> <li><a href="#" id="analysis">Analysis</a></li> <li><a href="#" id="analysis">Analysis</a></li> <li><a href="#" id="analysis">Analysis</a></li> <li><a href="#" id="analysis">Analysis</a></li> <li><a href="#" id="analysis">Analysis</a></li> <li><a href="#" id="analysis">Analysis</a></li> <li><a href="#" id="analysis">Analysis</a></li> <li><a href="#" id="analysis">Analysis</a></li> <li><a href="#" id="analysis">Analysis</a></li> <li><a href="#" id="analysis">Analysis</a></li> <li><a href="#" id="analysis">Analysis</a></li> <li><a href="#" id="analysis">Analysis</a></li> <li><a href="#" id="analysis">Analysis</a></li> <li><a href="#" id="analysis">Analysis</a></li> <li><a href="#" id="analysis">Analysis</a></li> <li><a href="#" id="analysis">Analysis</a></li> <li><a href="#" id="analysis">Analysis</a></li> </ul> </div> </div> <div class="inv-tabcontent"> <div class="inner-wrap title-criteria" id="criteria"> <h3>criteria</h3> </div> <div class="inner-wrap title-due-diligence" id="due-diligence"> <h3>diligence</h3> </div> <div class="inner-wrap show title-intelligence" id="intelligence"> <h3>intelligence</h3> </div> <div class="inner-wrap title-onsite-operation" id="onsite-operation"> <h3>operation</h3> </div> <div class="inner-wrap title-analysis" id="analysis"> <h3>analysis</h3> </div> </div>