自举模态单元偏移量为零

Question

要滚动到我的引导模式中的元素，我可以检查元素的偏移量。例如，有8个div，每个都有自己的id (#row-1，#row-2，等等)。如果打开模式，然后将以下内容输入控制台，就会得到正确的偏移值。

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

但是，当我将它放入代码本身中时，在使用console.log打开模型之后，我会得到0。

这种差异怎么会发生呢？我尝试了所有我能在这里找到的解决方案，但是所有的解决方案都给了我相同的0。

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

Answer 1

您必须等待模式显示：

  // 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;
    });

Answer 2

我的猜测是，为了给出正确的值，还没有完成元素的显示吗？尝试使用一个setTimeout来验证这一点：

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

Answer 3

你说过：

如果我可以使用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的链接。

工作小提琴：http://jsfiddle.net/xL9at8sc/

希望这能帮助你和其他人..。