如何解决bootstrap model的滚动条和body滚动条的问题？

Question

使用bootstrap3.7的model，modal-body中的内容用滚动条来显示，现在存在这样的情况，body的内容很多，有滚动条，在滚动model内容的时候，把body的滚动条也带着滚动了，如何能避免这样的情况，只滚动model中的滚动条呢？
网上有说法通过css来解决，我试过了，的确可以，如下
     html, body{
            overflow: hidden;
            height: 100%;
        }<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog" style="width: 865px;">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header w3-blue">
                <button type="button" class="close w3-text-white" data-dismiss="modal">&times;</button>
                <h4 class="modal-title"></h4>
            </div>
            <div class="modal-body" style="height:800px;">
                <div class="infoleft">
                    <div class="fabushijian">发布日期</div>   
                <div class="tongzhineirong">通知内容</div>              
                <div class="yueduliebiao">
                    通知列表
                </div>
                <div class="liebiaohead">
                    <table class="w3-table" style="height: 50px;">
                        <tr class="w3-blue-title">
                            <th width="130" style="vertical-align: middle!important;">编号</th>
                            <th width="196" style="vertical-align: middle!important;">姓名</th>
                            <th width="180" style="vertical-align: middle!important;">班级</th>
                        </tr>
                    </table>
                </div>
                <div class="liebiaoneirong">
                    <table class="w3-table w3-striped-grey">
                        <tr>
                            <td width="130">201903024</td>
                            <td width="196">张三三</td>
                            <td width="180">三班</td>
                        </tr>
                        <tr>
                            <td width="130">201903024</td>
                            <td width="196">张三三</td>
                            <td width="180">三班</td>
                        </tr>
                        <tr>
                            <td width="130">201903024</td>
                            <td width="196">张三三</td>
                            <td width="180">三班</td>
                        </tr>
                        <tr>
                            <td width="130">201903024</td>
                            <td width="196">张三三</td>
                            <td width="180">三班</td>
                        </tr>
                        <tr>
                            <td width="130">201903024</td>
                            <td width="196">张三三</td>
                            <td width="180">三班</td>
                        </tr>
                        <tr>
                            <td width="130">201903024</td>
                            <td width="196">张三三</td>
                            <td width="180">三班</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>但是实际情况中，我的body的内容是必须要出现滚动条的，如果使用上边的样式的话，超出部分就隐藏了，这不是我想要的，所以想请教一下有没有别的方法，最好是PC和移动端都能解决这个滚动问题。

Answer 1

<script>
    $(document).ready(function(){
        $("#myModal").on('show.bs.modal', function () {
            $('html,body').css('height', '100%').css('overflow', 'hidden');
        });
        $("#myModal").on('hide.bs.modal', function () {
            $('html,body').removeAttr('style');
        });
    });
</script>
从网上找了方法，说打开模态窗的时候给html和body添加样式:height:100%和overflow:hidden，就能让body不出现滚动条，关闭模态窗的时候，去掉刚才给html和body的样式，但是我发现这样没有效果。