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

【问题标题】：Select element cause a scroll to top of the page on iOS devices选择元素会导致滚动到 iOS 设备上的页面顶部
【发布时间】：2015-04-03 21:35:33
【问题描述】：

我有一个 Bootstrap 网站，其模态框内有一个 <select> 元素。

我的问题是，在 iOS（在 iPhone 5 上尝试过）中，当我尝试打开 select 以选择 option 时，背景内容（模式后面）会自动滚动到页面顶部。

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

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

【问题讨论】：

看起来这是由 Mobile Safari 中的错误引起的。您可以在 Github here 上关注未解决的问题。
请附上您的问题的测试用例 (jsfiddle.net)。

标签： ios css twitter-bootstrap cross-browser selection

【解决方案1】：

我很久以前就遇到过 iPad 设备的类似问题。在 javascript 中使用 event.preventDefault() 已经解决了这个问题。

【讨论】：

试过了。但是，它不会停止滚动到顶部

【解决方案2】：

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

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

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

【讨论】：

我刚刚检查了前面提到的 Github 问题，这个错误似乎仍然没有修复，你的解决方案有什么更新吗？谢谢，:)