Bootstrap 模态元素偏移量为零

Question

要滚动到我的 Bootstrap 模态中的某个元素，我可以检查该元素的偏移量。例如有 8 个 div，每个都有自己的 ID（#row-1、#row-2 等）。如果我打开模式然后将以下内容输入控制台，我会得到正确的偏移值。

$('#row-6').offset()['top'];

但是当我 console.log 将其放入代码本身时，在使用 .modal('show') 打开模态后，我 0 返回。

怎么会出现这种差异呢？我尝试了在这里可以找到的所有解决方案，但所有解决方案都给了我相同的 0.

如果我可以使用 JavaScript 以任何其他方式滚动到该元素，我的问题也将得到解决。

Answer 1

我的猜测是这些元素还没有显示出来以便为您提供正确的值？尝试使用 setTimeout 来验证这一点：

setTimeout(function(){ $('#row-6').offset()['top']; }, 3000);

Answer 2

你说：

My problem would also be solved if I could scroll to the element in any other way with javascript.

所以，这是我对你的问题的建议：

html:

<button id="modal_show" class="btn btn-warning">Show modal</button>
<div id="myModal" class="modal modal-flex fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="margin-top:60px;">
    <div class="modal-dialog">
        <div class="modal-content" style="padding:5px;">
            <div class="modal-body">
                <div class="row" id="row1">
                    <div class="col-xs-12">
                        <p>
                            This is row 1
                        </p>
                    </div>
                </div>
                <div class="row" id="row2">
                    <div class="col-xs-12">
                        <p>
                            This is row 2
                        </p>
                    </div>
                </div>
                <div class="row" id="row3">
                    <div class="col-xs-12">
                        <p>
                            This is row 3
                        </p>
                    </div>
                </div>
                <div class="row" id="row4">
                    <div class="col-xs-12">
                        <p>
                            This is row 4
                        </p>
                    </div>
                </div>
                <div class="row" id="row5">
                    <div class="col-xs-12">
                        <p>
                            This is row 5
                        </p>
                    </div>
                </div>
                <div class="row" id="row6">
                    <div class="col-xs-12">
                        <p>
                            This is row 6
                        </p>
                    </div>
                </div>
                <div class="row" id="row7">
                    <div class="col-xs-6">
                        <p>
                            This is row 7
                        </p>
                    </div>
                    <div class="col-xs-6">
                        <p class="pull-right">
                            <span class="scroller" data-to="3">Go To 3</span>
                        </p>
                    </div>
                </div>
                <div class="row" id="row8">
                    <div class="col-xs-6">
                        <p>
                            This is row 8
                        </p>
                    </div>
                    <div class="col-xs-6">
                        <p class="pull-right">
                            <span class="scroller" data-to="2">Go To 2</span>
                        </p>
                    </div>
                </div>

            </div>
            <div class="modal-footer">
                <div class="row">
                    <div class="col-xs-12 pull-right">
                        <button type="button" class="btn btn-warning" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- /.modal-content --> 
    </div>
    <!-- /.modal-dialog --> 
</div>

Jquery:

$('#modal_show').on('click', function(){
    $('#myModal').modal({show: true});
});

$('.scroller').click(function(){
    var targetId = $(this).attr("data-to");
    $('#myModal').animate({
        scrollTop: $("#row"+targetId).position().top
    }, 1000);
});

还有一些 css:

.row {
    min-height:100px;
}
.scroller {
    cursor:pointer;
    text-decoration:underline;
}

当您向下滚动到 div 的 7 和 8 时，您会注意到分别向上滚动到 div #3 和 #2 的链接。

工作fiddle：http://jsfiddle.net/xL9at8sc/

希望对您和其他人有所帮助...

Answer 3

您必须等待模式显示：

  // The modal is shown
    $('#yourModal').on('shown.bs.modal', function() {
      // Get the right offset
      var offset = $("#yourelement").offset();
      var offsetTop = offset.top;
      var offsetLeft = offset.left;
    });

Bootstrap 模态元素偏移量为零

Boostrap modal element offset giving zero

javascript

jquery

twitter-bootstrap

bootstrap-modal