ios - 选择元素导致在 iOS 设备上滚动到页面顶部

Question

我有一个带有 <select> 的 Bootstrap 网站模态内的元素。

我的问题是在 iOS 中(在 iPhone 5 上试过)当我尝试打开 select选择 option背景内容(在模态后面)自动向上滚动到页面顶部。

我在 Safari 和 Google 搜索 上收到此错误，但在 Chrome 和 Mercury 浏览器上没有错误。

有谁知道这个问题的原因和解决方法吗？谢谢

Answer 1

我遇到了同样的问题，并找到了真正解决这个问题的解决方案:

if( navigator.userAgent.match(/iPhone|iPad|iPod/i) ) {

    $('.modal').on('show.bs.modal', function() {

        // Position modal absolute and bump it down to the scrollPosition
        $(this)
            .css({
                position: 'absolute',
                marginTop: $(window).scrollTop() + 'px',
                bottom: 'auto'
            });

        // Position backdrop absolute and make it span the entire page
        //
        // Also dirty, but we need to tap into the backdrop after Boostrap 
        // positions it but before transitions finish.
        //
        setTimeout( function() {
            $('.modal-backdrop').css({
                position: 'absolute', 
                top: 0, 
                left: 0,
                width: '100%',
                height: Math.max(
                    document.body.scrollHeight, document.documentElement.scrollHeight,
                    document.body.offsetHeight, document.documentElement.offsetHeight,
                    document.body.clientHeight, document.documentElement.clientHeight
                ) + 'px'
            });
        }, 0);
    });
}

希望这对遇到同样问题的其他人有所帮助。