聚焦输入时在iOS上的触摸滚动问题

我在iOS上遇到了一些可滚动div的问题。当尝试通过触摸外部输入进行滚动时，它可以毫无问题地滚动，但是当我尝试滚动并触摸输入以开始滚动时（发生这种情况的机会很多，因为它是一个具有大量输入的div ）它滚动整个窗口，而不是滚动div。我在桌面或Android上都没有这个问题。我发现了一个类似的问题（iOS HTML Input Tag Stops Scrolling in Scrollable Element），但它也没有任何答案。虽然我没有找到任何好的解决方案，但我决定在用户触摸输入时防止事件touchmove，但它不完全是我想要的。聚焦输入时在iOS上的触摸滚动问题

也许有人已经面临这个问题，并可以提供帮助。我真的很感激它，提前谢谢。

来源

2014-08-31 Mindastic

我面临着同样的问题。看到这里http://stackoverflow.com/questions/26784118/scrolling-on-ios-设备手指输入标签/ 28862015＃28862015。我在那里提供了详细信息，或者是什么导致了我的问题。您能否看到它是否与您一样？ – corbin 2015-03-04 19:23:29

要获得本地势头滚动的iOS 5以上，你将需要：

div { 
    overflow: scroll; 
    -webkit-overflow-scrolling: touch; 
}

来源：Overflow

也许你还需要：

div > * { 
    -webkit-transform: translateZ(0px); 
}

来源：Similar question in Stack Overflow

来源2：Another similar question

来源

2014-09-23 06:58:59 mjimcua

这与此无关OP在问什么。问题在于，如果您从输入（例如文本框）触发拖动滚动（触发touchmove事件），则整个文档将滚动而不是内部可滚动区域。 – nothingisnecessary 2016-03-29 18:05:15

这个工作，但不是把它放在div中。把它放在html或body中。 'html {overflow：scroll; -webkit-overflow-scrolling：touch;}' – 2016-08-24 10:21:51

谢天谢地，那真讨厌！ – Sequential 2017-05-14 17:13:25

哈克解决方法，但通过这样做，我甚至可以在窗体输入上进行滚动工作。 JS在渲染引擎中强制回流，这是iOS8 Safari中的错误所在。由于浏览器在关注时强制处理滚动，因此将重点放在上时，将高度更改为自动还可以改进滚动。

标记：

<div class="modal-backdrop-container"> 
    <div class="modal-backdrop"> 
    <div class="modal> <!-- Content --> </div> 
    </div> 
</div>

CSS：

.modal-backdrop-container { 
    z-index: 10; 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    height: 100%; 
} 
.modal-backdrop { 
    z-index: 10; 
    height: 100%; 
    background-color: rgba(255,255,255,0.5); 
    overflow: auto; 
    overflow-x: hidden; 
    overflow-y: scroll; 
    -webkit-overflow-scrolling: touch; 
} 
.modal { 
    position: relative; 
    width: 400px; 
    max-width: 100%; 
    margin: auto; 
    background-color: white; 
}

JS：

// reflow when changing input focus 
     $modalInputs = $('.modal').find(':input'); 
     modalInputs.on('focus', function() { 
      var offsetHeight = modal.$backdrop[0].offsetHeight; 
      modal.$backdropContainer.css({ 
       'height': 'auto' 
      }); 
     }); 
     modalInputs.on('blur', function() { 
      var offsetHeight = modal.$backdrop[0].offsetHeight; 
      modal.$backdropContainer.css({ 
       'height': '' 
      }); 
     });

不知道var offsetHeight = modal.$backdrop[0].offsetHeight;线是必要的，因为既此又改变高度值应强制回流。

来源

2015-02-22 04:31:41

这个东西让我发疯了，经过测试的一切，我发现以下答案从Thomas Bachem here工作，并在jQuery中变得更简单。

只需在输入中添加一个类scrollFix，即可开始使用。（或者直接适用该JS来使用$('input, textarea')

现在，当你触摸和滚动在iOS 8+的输入，输入获取所有的“指针事件”残疾人（包括有问题的行为）的任何输入/ textarea的。这些当我们发现一个简单的触摸“指针事件”被启用。

$('.scrollFix').css("pointer-events","none"); 

$('body').on('touchstart', function(e) { 
    $('.scrollFix').css("pointer-events","auto"); 
}); 
$('body').on('touchmove', function(e) { 
    $('.scrollFix').css("pointer-events","none"); 
}); 
$('body').on('touchend', function(e) { 
    setTimeout(function() { 
     $('.scrollFix').css("pointer-events", "none"); 
    },0); 
});

来源

2015-12-24 15:21:15 Dotgreg

一直在寻找修复Iphone IOS9的小时，这个工作完美。干杯。 – JDavies 2016-10-27 11:10:34

尝试使用Ionic（混合网页包装）。当谈到离子时，这有点夸张。如果我点击一个输入，它将页面滚动到正确的位置并打开键盘，但它实际上并不关注输入。至少在这里对我有好的开始。 – ntgCleaner 2017-02-10 14:41:43

html { 
    overflow: scroll; 
    -webkit-overflow-scrolling: touch; 
}

来源

2017-06-01 18:19:03 ecairol

这个答案重复现有的一部分，应该删除。 – kelin 2017-06-01 21:58:25

聚焦输入时在iOS上的触摸滚动问题

回答

相关问题