zoukankan      html  css  js  c++  java
  • 禁止橡皮筋效果

    
    
    let startY = 0
    let enabled = false
    let supportsPassiveOption = false
    try {
    let opts = Object.defineProperty({}, 'passive', {
    get: function () {
    supportsPassiveOption = true
    }
    })
    window.addEventListener('test', null, opts)
    } catch (e) {
    // console.log('false')
    }
    const handleTouchmove = function (evt) {
    let el = evt.target
    let zoom = window.innerWidth / window.document.documentElement.clientWidth
    if (evt.touches.length > 1 || zoom !== 1) {
    return
    }
    while (el !== document.body && el !== document) {
    let style = window.getComputedStyle(el)
    if (!style) {
    break
    }
    if (el.nodeName === 'INPUT' && el.getAttribute('type') === 'range') {
    return
    }
    let scrolling = style.getPropertyValue('-webkit-overflow-scrolling')
    let overflowY = style.getPropertyValue('overflow-y')
    // let height = parseInt(style.getPropertyValue('height'), 10)
    let isScrollable = scrolling === 'touch' && (overflowY === 'auto' || overflowY === 'scroll')
    let canScroll = el.scrollHeight > el.offsetHeight
    if (isScrollable && canScroll) {
    let height = el.clientHeight
    let curY = evt.touches ? evt.touches[0].screenY : evt.screenY
    let isAtTop = (startY <= curY && el.scrollTop === 0)
    let isAtBottom = (startY >= curY && el.scrollHeight - el.scrollTop === height)
    if (isAtTop || isAtBottom) {
    evt.preventDefault()
    }
    return
    }
    el = el.parentNode
    }
    evt.preventDefault()
    }
    const handleTouchstart = function (evt) {
    startY = evt.touches ? evt.touches[0].screenY : evt.screenY
    }
    const enable = function () {
    window.addEventListener('touchstart', handleTouchstart, supportsPassiveOption ? { passive: false } : false)
    window.addEventListener('touchmove', handleTouchmove, supportsPassiveOption ? { passive: false } : false)
    enabled = true
    }
    const disable = function () {
    window.removeEventListener('touchstart', handleTouchstart, false)
    window.removeEventListener('touchmove', handleTouchmove, false)
    enabled = false
    }
    const isEnabled = function () {
    return enabled
    }
    let testDiv = document.createElement('div')
    document.documentElement.appendChild(testDiv)
    testDiv.style.WebkitOverflowScrolling = 'touch'
    let scrollSupport = 'getComputedStyle' in window && window.getComputedStyle(testDiv)['-webkit-overflow-scrolling'] === 'touch'
    document.documentElement.removeChild(testDiv)
    if (scrollSupport) {
    enable()
    }
    let preventOverScroll = {
    enable: enable,
    disable: disable,
    isEnabled: isEnabled
    }

    export default preventOverScroll
    
    
  • 相关阅读:
    Struts2 JSONObject的使用
    基于编辑距离来判断词语相似度方法(scala版)
    Kafka的基本概念与安装指南(单机+集群同步)
    HBase跨地区机房的压测小程序——从开发到打包部署(图文版)
    计算机网络基础回顾
    通过两个小栗子来说说Java的sleep、wait、notify、notifyAll的用法
    Volatile的作用
    ThreadLocal从源码到应用
    程序猿的日常——Java中的集合列表
    JDK并发包常用的知识图
  • 原文地址:https://www.cnblogs.com/QQPrincekin/p/11541211.html
Copyright © 2011-2022 走看看