当固定元素获得焦点时,ios8中的Safari是滚动屏幕

Mohammad AlB.. 55

基于对这个问题的这个好分析,我在css中使用了这个html和body元素:

html,body{
    -webkit-overflow-scrolling : touch !important;
    overflow: auto !important;
    height: 100% !important;
}

我觉得它对我很有用.

基于对这个问题的这个好分析,我在css中使用了这个html和body元素:

html,body{
    -webkit-overflow-scrolling : touch !important;
    overflow: auto !important;
    height: 100% !important;
}

我觉得它对我很有用.

我能想到的最好的解决方案是切换到使用position: absolute;焦点并计算它在使用时的位置position: fixed;.诀窍是focus事件发生得太晚,所以touchstart必须使用.

这个答案中的解决方案非常接近地模仿了iOS 7中的正确行为.

的body元件必须具有定位以确保正确的定位时,元件切换到绝对定位.

body {
    position: relative;
}

以下代码是所提供测试用例的基本示例,可以根据您的具体用例进行调整.

//Get the fixed element, and the input element it contains.
var fixed_el = document.getElementById('b');
var input_el = document.querySelector('textarea');
//Listen for touchstart, focus will fire too late.
input_el.addEventListener('touchstart', function() {
    //If using a non-px value, you will have to get clever, or just use 0 and live with the temporary jump.
    var bottom = parseFloat(window.getComputedStyle(fixed_el).bottom);
    //Switch to position absolute.
    fixed_el.style.position = 'absolute';
    fixed_el.style.bottom = (document.height - (window.scrollY + window.innerHeight) + bottom) + 'px';
    //Switch back when focus is lost.
    function blured() {
        fixed_el.style.position = '';
        fixed_el.style.bottom = '';
        input_el.removeEventListener('blur', blured);
    }
    input_el.addEventListener('blur', blured);
});

这是相同的代码,没有用于比较的黑客.

如果position: fixed;元素具有除定位之外的任何其他父元素body,则切换到position: absolute;可能具有意外行为.由于其性质position: fixed;可能不是主要问题,因为嵌套这样的元素并不常见.

虽然使用该touchstart事件将过滤掉大多数桌面环境,但您可能希望使用用户代理嗅探,以便此代码仅针对损坏的iOS 8运行,而不是针对其他设备(如Android和较旧的iOS版本)运行.不幸的是,我们还不知道Apple何时会在iOS中修复此问题,但如果在下一个主要版本中没有修复它,我会感到惊讶.

我找到了一种无需改变绝对位置即可工作的方法!

完整的未注释代码

var scrollPos = $(document).scrollTop();
$(window).scroll(function(){
    scrollPos = $(document).scrollTop();
});
var savedScrollPos = scrollPos;

function is_iOS() {
  var iDevices = [
    'iPad Simulator',
    'iPhone Simulator',
    'iPod Simulator',
    'iPad',
    'iPhone',
    'iPod'
  ];
  while (iDevices.length) {
    if (navigator.platform === iDevices.pop()){ return true; }
  }
  return false;
}

$('input[type=text]').on('touchstart', function(){
    if (is_iOS()){
        savedScrollPos = scrollPos;
        $('body').css({
            position: 'relative',
            top: -scrollPos
        });
        $('html').css('overflow','hidden');
    }
})
.blur(function(){
    if (is_iOS()){
        $('body, html').removeAttr('style');
        $(document).scrollTop(savedScrollPos);
    }
});

打破它

首先,您需要在HTML中将固定输入字段放在页面顶部(这是一个固定元素,因此无论如何它在语义上应该是有意义的):

    
      
    

    
        
            
        

        
(content)

    

然后,您需要将当前滚动位置保存到全局变量中:

//Always know the current scroll position
var scrollPos = $(document).scrollTop();
$(window).scroll(function(){
    scrollPos = $(document).scrollTop();
});

//need to be able to save current scroll pos while keeping actual scroll pos up to date
var savedScrollPos = scrollPos;

然后你需要一种方法来检测iOS设备,这样它就不会影响不需要修复的东西(函数来自/sf/ask/17360801/)

//function for testing if it is an iOS device
function is_iOS() {
  var iDevices = [
    'iPad Simulator',
    'iPhone Simulator',
    'iPod Simulator',
    'iPad',
    'iPhone',
    'iPod'
  ];

  while (iDevices.length) {
    if (navigator.platform === iDevices.pop()){ return true; }
  }

  return false;
}

现在我们拥有了我们需要的一切,这里是修复:)

//when user touches the input
$('input[type=text]').on('touchstart', function(){

    //only fire code if it's an iOS device
    if (is_iOS()){

        //set savedScrollPos to the current scroll position
        savedScrollPos = scrollPos;

        //shift the body up a number of pixels equal to the current scroll position
        $('body').css({
            position: 'relative',
            top: -scrollPos
        });

        //Hide all content outside of the top of the visible area
        //this essentially chops off the body at the position you are scrolled to so the browser can't scroll up any higher
        $('html').css('overflow','hidden');
    }
})

//when the user is done and removes focus from the input field
.blur(function(){

    //checks if it is an iOS device
    if (is_iOS()){

        //Removes the custom styling from the body and html attribute
        $('body, html').removeAttr('style');

        //instantly scrolls the page back down to where you were when you clicked on input field
        $(document).scrollTop(savedScrollPos);
    }
});