Question

我有模态，其中有 oveflow-y 并且标题是静态的我想向下滚动到模态中的特定文本但问题是滚动是通过正文完成的，而模态的滚动条没有'移动。

这是我的代码：

分别是javascript css和html

 setTimeout(function(){

    $("#theory_modal_body").html(body_html);
    var height_overflow = $(this).offset().top;
    var final_offset = $(".highlighted:first").offset().top - 
    height_overflow;
    $("#theory-modal").animate({
        scrollTop: final_offset
    }, 2000);
}, 3000);
});

.modal-body {
    max-height: calc(100vh - 1px);
    overflow-y: auto;
}

<div class="modal fade" id="theory-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
          <div class="modal-dialog" >
            <div class="modal-content">
                <div id="theory-modal-header" class="modal-header" >
                    <h4 id="theory_modal_title" class="text-center"></h4>
                    <a id="theory-modal-judgement">Judgement</a>
                    <a id="theory-modal-cites" >Cites</a>
                    <a id="theory-modal-cited-by" >Cited By</a>
                    <a id="theory-modal-judis-download" >Court's Copy</a>
                    <a id="theory-modal-download" >Download</a>
                </div>
              <!--<div class="modal-header">-->
                <!--<button type="button" class="close" data-dismiss="modal" aria-label="Close" data-toggle="modal" data-target="#relevant"><span aria-hidden="true">&times;</span></button>-->
              <!--</div>-->
              <div class="modal-body" style="text-align: center">
                <h5 id="theory_modal_error" class="text-center"></h5>
                <p id="theory_modal_body" >
                </p>
              </div>
            </div>
          </div>
        </div>

Answer 1

您必须为.modal-body - overflow-y:auto;添加固定高度，而不是将.modal-dialog溢出值添加到初始值。

1）。试试这个让模态体可以滚动！

.modal-dialog{
    overflow-y: initial !important
}
.modal-body{
    overflow-y: auto;
    height:250px;
}

2）。使用javascript滚动到div元素

$( document ).ready(function() {
 $('.modal-body').animate({
    scrollTop: $("#name").attr('topheight')
 }, 1000);
});

<div id="name" topheight="700"></div>

如果您有任何疑问，请在下方发表评论？

在模态中滚动浏览javascript

1 个答案: