移动端网页滑动滚动条页面晃动

问题遇到的现象和发生背景

同一个文件,有两种解析渲染方

问题相关代码,请勿粘贴截图
<div class="box box1 mui-slider-item mui-control-content mui-active" id="gbox1">
                <div id="scroll1" class="mui-scroll-wrapper">
                    <div class="mui-scroll">
        <!--图片轮播-->
                <div class="slide-detail-pic" id="slide-detail-pic">
                    <div class="slide-detail-pic swiper-container" id="slide-detail-pic">
                        <ul class="swiper-wrapper swiperimgauto">
                            <li class="swiper-slide"><a href="javascript:void(0);"><img src="{$goods['img']}" alt=""/></a></li>
                            <!--{loop $imgs $p}-->
                            <li class="swiper-slide"><a href="javascript:void(0);"><img src="{$p['img']}" alt=""/></a></li>
                            <!--{/loop}-->
                        </ul>
                        <div class="swiper-pagination"></div>
                        {if $goods['video']!=''}
                               <span class="play-btn"><i class="layui-icon yec-video"></i>&nbsp;视频</span>
                               <div id="goods-video" style="display: none;background-color: #000;">
                                   <video src="{$goods['video']}" id="player" preload="auto" controls="controls" width="100%" height="auto"></video>
                               </div>
                               <a class="close-video layui-icon yec-close1"></a>
                           {/if}
                    </div>
                </div>
        <!--图片轮播-->
        <!--文字介绍-->
                <div class="word-detail bgw">
                    <div class="title-det">
                        <h3 class="title"><a href="javascript:void(0);">{if $goods['label_pos'] ==1}<span class="orange">{$goods['label']}</span>{/if}{$goods[name]}{if $goods['label_pos'] ==2}<span class="orange">{$goods['label']}</span>{/if}</a></h3>
                    </div>
                    <div class="price-det">
                        <!-- <span class="grey-td">售价:</span> -->
                        <div class="pd-nr">
                            <p><span class="now"><span id="ym-price">¥{$goods['goods_price']}</span></span><del><span>{$goods[marketprice]}</span></del></p>
                        </div>
                        {if $team}
                        <div>
                            拼团更优惠:
                            <table class="tb">
                                {loop $team['data'] $p}
                                <tr>
                                    <td>{$p['num']}人团</td>
                                    <td class="price">¥{$p['price']}</td>
                                    <td>团长价:<span class="price">{if $p['teamer_price']==0}免单{else}¥{$p['teamer_price']}{/if}</span></td>
                                </tr>
                                {/loop}
                            </table>
                        </div>
                        {/if}
                    </div>
                    <div class="choose-size spec" id="goods-spec">
                    <!--{loop $spec $p}-->
                        <div class="it">
                            <h4 class="spec-name">{$p[name]}</h4>
                            <span class="select-mod">
                                <ul class="choose-size-ul">
                                    <!--{loop $p['val'] $v}-->
                                        <!--{if $p['is_img']==1}-->
                                            <li style="margin:3px"><a href="javascript:void(0);" id="{$v['name']}">{if $v['img']['thumb']}<img src="{$v['img']['thumb']}" width="20" height="20"> {/if}{$v['name']}</a><i class="arrow-checked"></i></li>
                                            <!--{else}-->
                                            <li style="margin:3px"><a href="javascript:void(0);" id="{$v}">{$v}</a><i class="arrow-checked"></i></li>
                                        <!--{/if}-->
                                    <!--{/loop}-->
                                </ul>
                            </span>
                        </div>
                    <!--{/loop}-->
                    </div>
                    <div class="barnum-det">
                        <p>品牌:<span>{$goods['brand_name']}</span></p>
                        <p class="num">已售:<span>{$goods['virtualnum']}</span></p>
                    </div>
                </div>
                {if $teaming}
                <div class="team-list" style="display: block;">
                        <div class="tit">
                            以下老铁正在拼团,可直接参与 <a href="team.html" class="more tiao">查看更多</a>
                        </div>
                        <div class="list">
                            {loop $teaming $p}
                            <div class="item">
                                <div class="uinfo">
                                    <span class="img"><img src="{$p['img']}"></span>
                                    <span class="name">{$p['uname']}</span>
                                </div>
                                <div class="teamtime">
                                    <p>还差<b class="remain_count">{$p['remain_count']}</b>人成团</p>
                                    <p id="time1" data-time="{$p['remain_time']}" class="timeinfo">剩余<span id="v_day1" style="display: inline-block;">0</span><span id="v_hour1">0</span>:<span id="v_minute1">0</span>:<span id="v_second1">0</span> </p>
                                    <script>window.setInterval(function(){SetRemainTime(1);},1000);</script>
                                    <a href="#mod-jointeam" class="jointeam tiao" data-num="{$p['num']}" data-user='{$p["team_user_json"]}'>去参团</a>
                                </div>
                            </div>
                            {/loop}
                        </div>
                        <div class="clear"></div>
                    </div>
                {/if}
                <ul class="function-det flex bgw">
                    <li class="flex1">
                        <i class="icon-fun1"></i>
                        正品行贷
                    </li>
                    <li class="flex1">
                        <i class="icon-fun2"></i>
                        免息分期
                    </li>
                    <li class="flex1">
                        <i class="icon-fun3"></i>
                        7天退换
                    </li>
                    <li class="flex1">
                        <i class="icon-fun4"></i>
                        金牌客服
                    </li>
                </ul>
        <!--文字介绍-->
        <!--评价-->
                <div class="bgw appraise">
                    <a href="javascript:void(0);" class="mui-navigate-right titie-line" id="view-txt">评价</a>
                     <div id="view-more-appraise">
                    <ul class="appraise-ul">
                        <!--{if !$comment}--><li style="text-align: center;">暂无评价~</li><!--{/if}-->
                        <!--{loop $comment $p}-->
                        <li>
                            <div class="picbox">
                                <img src="{if $p['uimg']!=''}{$p['uimg']}{else}{tpl_root}images/avatar.jpg{/if}" alt=""/>
                            </div>
                            <div class="txt-right">
                                <div class="txtr-top">
                                    <p class=" grey96">{$p['anon_name']}</p>
                                </div>
                                <div class="txt-middle ">
                                    <p>{$p['content']}</p>
                                </div>
                                <div class="com-pic">
                                    <!--{if $p['thumb']}-->
                                            <div class="show-pic" id="show-pic">
                                                <div class="sc_bd">
                                                    <dl>
                                                    <!--{loop $p['thumb'] $i $t}-->
                                                    <dd><a data-src="{$p['img'][$i]}"><img src="{$t}" width="80" height="80"/></a></dd>
                                                    <!--{/loop}-->
                                                        </dl>
                                                </div>
                                            </div>
                                        <!--{/if}-->
                                </div>
                                <!--{if $p['admin_reply']}-->
                                            <div class="reply">
                                                <ul>
                                                    <!--{loop $p['admin_reply'] $v}-->
                                                    <li>
                                                        <span>{$v['uname']}:</span>{$v['content']}
                                                    </li>
                                                    <!--{/loop}-->
                                                </ul>
                                            </div>
                                   <!--{/if}-->
                                <p class="clear grey96">{$p['addtime']}</p>
                            </div>
                        </li>
                        <!--{/loop}-->
                    </ul>
                    <div class="morediv" id="view-more-appraise">
                        <a href="javascript:void(0);">查看更多&nbsp;&gt;</a>
                    </div>
                    </div>
                </div>
        <!--评价-->
        <!--猜你感兴趣-->
                <div class="guess-like">
                    <h3 class="pur-title" style="margin-bottom:10px;">猜你感兴趣</h3>
                    <ul class="popular-pro">
                        <!--{loop $remmend_goods $p}-->
                        <li>
                            <a href="{$p[url]}" class="picbox tiao"><img src="{$p[thumb]}" alt="196*196"></a>
                            <a href="{$p[url]}" class="title tiao">{$p[name]}</a>
                            <div class="price-cart">
                                <p><span>{$p[price]}</span></p>
                                <!-- <a onclick="addCart({$p[goods_id]},0,1);" class="cart"></a> -->
                            </div>
                        </li>
                        <!--{/loop}-->
                    </ul>
                </div>
        <!--猜你感兴趣-->
                <!--<div class="loading">
                    <p class="mui-text-center"><i class="mui-icon mui-icon-arrowup"></i>继续拖动,查看图文详情</p>
                </div>-->
                </div>
                </div>
            </div>

运行结果及报错内容

有的页面正常,有的页面滑动滚动条时页面会晃动

我的解答思路和尝试过的方法

尝试将mui-control-content设置的最小高度去掉,问题还是没有解决

我想要达到的结果

原因可能是 宽度问题,既然你说有滚动条,那么就有时候就会忽略滚动条的宽度,比如 元素内容少的时候宽度是100px ,内容多了后出现滚动条,滚动条宽度10 这样总宽度就变成110了 (这时有些地方宽度不一致所以出现了晃动的情况) ,正确的是元素宽度+滚动条宽度=总宽度 建议使用滚动插件制作滚动的布局 或排版 而且方便快捷,推荐 使用 skrollr js 或 better-scroll.js