Question

我有一个基于用户通过Bootstrap模式访问的文本的多项选择测验。之后，当他们查看其答案并打开模态时，答案的位置将突出显示（通过ID定位为跨度元素）。但是，用户必须滚动才能找到位于模式下方的突出显示的文本。理想情况下，我希望模态加载后模态自动向下滚动到这些位置。

我正在使用此代码块在模态加载后进行滚动，但不会滚动。

$(window).on('shown.bs.modal', function() { 
    $('#myModal').animate({
        scrollTop: $('#D6').position().top + $('#myModal').height()
    });
});

有人可以建议吗？ This is the activity.

谢谢！

Answer 1

这里的问题是试图将HTML元素（即#D6和#myModal）附加到DOM之前访问它们的位置/维度。

解决方案是重组代码，以使这些元素在尝试调用其.height()或.position()方法之前先附加到DOM。

不建议将以下代码用作解决方案，但提供该代码可以进一步了解该问题：

$(window).on('shown.bs.modal', function() { 

    // 1. If #myModal not attached to DOM, calling $('#myModal').height() returns undefined

    // 2. #D6 not attached to DOM, $('#D6').position().top is not defined

    // 3. Performing this arithmetic, $('#D6').position().top + $('#myModal').height(), will therefore be undefined

    // Assuming #D6 and #myModal will be attached to the DOM, delay access to .height() and .position()
    setTimeout( function() { 

        // We're assuming that #D6 and #myModal are now present in the DOM after this delay. If that is the case, the logic below will correctly calculate an offet value for scrollTop, thus achieving the desired effect
        $('#myModal').animate({ 
            scrollTop: $('#D6').position().top + $('#myModal').height() 
        }); 
    }, 100);
});

加载后滚动到引导程序模态中的元素

1 个答案: