touch-action:none与移动端滚动行为测试实例页面

展示

代码

• HTML：

  <div id="result" class="for-height"></div>

• CSS：

  html {
      touch-action: none;
      overflow: hidden;
  }
  body {
      touch-action: auto;
      height: 100vh;
      position: relative;
      overflow: auto;
  }
  
  .for-height {
      width: 150px; min-height: 600px;
      background-color: #eee;
      margin: auto;
  }

• JS：

  document.addEventListener('touchmove', function (event) {
      result.insertAdjacentHTML('beforeend', '<p>touchmove trigger!<p>');
      event.preventDefault();
  });