Question

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

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

但是当我console.log进入代码本身时，在使用.modal('show')打开模态后，我得到了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/

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

Boostrap模态元素偏移给出零

3 个答案: