2018年11月25日 星期日

ios上 safari 視窗過度拖拉問題

在iphone上當在操作頁面的拖拉scroll
會造成整個視窗被拖拉上下移動
而讓原本該scroll的內容
在一個同時被拖動的視窗內移動
要修正這問題
需要在container內
對於使用者 touch過度拖拉的問題做修正
在網路上有找到解法
透過偵測touch事件 擋住不該往下繼續傳遞的事件
來讓視窗可以固定

最外層的container 加上scroll設定

 <div id='app' style="position:absolute; overflow:scroll; -webkit-overflow-scrolling: touch; top:0; left:0; bottom:0; right:0">

加上script
<script>
  var overscroll = function(el) {
    el.addEventListener('touchstart', function() {
      var top = el.scrollTop
        , totalScroll = el.scrollHeight
        , currentScroll = top + el.offsetHeight
      if(top === 0) {
        el.scrollTop = 1
      } else if(currentScroll === totalScroll) {
        el.scrollTop = top - 1
      }
    },{passive: false})
    el.addEventListener('touchmove', function(evt) {
      if(el.offsetHeight < el.scrollHeight)
        evt._isScroller = true
    },{passive: false})
  }
  overscroll(document.querySelector('.scroll'));
  document.body.addEventListener('touchmove', function(evt) {
    if(!evt._isScroller) evt.preventDefault()
  },{passive: false})
</script>

沒有留言: