Question

我有一个Bootstrap网站，在模态中有一个<select>元素。

我的问题是在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);
    });
}

希望这对有同样问题的人有所帮助。

Answer 2

我长期以来面对iPad设备的类似问题。在javascript中使用event.preventDefault（）解决了这个问题。

选择元素会导致滚动到iOS设备上的页面顶部

2 个答案: