ios html dom bounce,scroll - ipad safari: disable scrolling, and bounce effect? - Stack Overflow

向右看齐 2022-10-07 09:56 6阅读 0赞

Try this JS solution that toggles webkitOverflowScrolling style. The trick here is that this style is off, mobile Safari goes to ordinary scrolling and prevents over-bounce — alas, it is not able to cancel ongoing drag. This complex solution also tracks onscroll as bounce over the top makes scrollTop negative that may be tracked. This solution was tested on iOS 12.1.1 and has single drawback: while accelerating the scroll single over-bounce still happens as resetting the style may not cancel it immediately.

function preventScrollVerticalBounceEffect(container) \{

setTouchScroll(true) //!: enable before the first scroll attempt

container.addEventListener("touchstart", onTouchStart)

container.addEventListener("touchmove", onTouch, \{ passive: false \})

container.addEventListener("touchend", onTouchEnd)

container.addEventListener("scroll", onScroll)

function isTouchScroll() \{

return !!container.style.webkitOverflowScrolling

\}

let prevScrollTop = 0, prevTouchY, opid = 0

function setTouchScroll(on) \{

container.style.webkitOverflowScrolling = on ? "touch" : null

//Hint: auto-enabling after a small pause makes the start

// smoothly accelerated as required. After the pause the

// scroll position is settled, and there is no delta to

// make over-bounce by dragging the finger. But still,

// accelerated content makes short single over-bounce

// as acceleration may not be off instantly.

const xopid = ++opid

!on && setTimeout(() => (xopid === opid) && setTouchScroll(true), 250)

if(!on && container.scrollTop < 16)

container.scrollTop = 0

prevScrollTop = container.scrollTop

\}

function isBounceOverTop() \{

const dY = container.scrollTop - prevScrollTop

return dY < 0 && container.scrollTop < 16

\}

function isBounceOverBottom(touchY) \{

const dY = touchY - prevTouchY

//Hint: trying to bounce over the bottom, the finger moves

// up the screen, thus Y becomes smaller. We prevent this.

return dY < 0 && container.scrollHeight - 16 <=

container.scrollTop + container.offsetHeight

\}

function onTouchStart(e) \{

prevTouchY = e.touches\[0\].pageY

\}

function onTouch(e) \{

const touchY = e.touches\[0\].pageY

if(isBounceOverBottom(touchY)) \{

if(isTouchScroll())

setTouchScroll(false)

e.preventDefault()

\}

prevTouchY = touchY

\}

function onTouchEnd() \{

prevTouchY = undefined

\}

function onScroll() \{

if(isTouchScroll() && isBounceOverTop()) \{

setTouchScroll(false)

\}

\}

\}

发表评论取消回复

表情：

评论列表（有 0 条评论，6人围观）

还没有评论，来说两句吧...

相关阅读

相关 overflow:scroll；overflow:auto；不起作用

前言相信大家搜css touch-action很容易搜到一批文章，但感觉自己还是需要写下自己这这个过程中的一些探索经历。之所以写，是因为单独去学知识点或者单独看一篇

ゝ一纸荒年。/ 2023年10月11日 15:16/ 0 赞/ 19 阅读

相关 html5 scrolling,javascript - Horizontal Scrolling on Canvas. HTML5 - Stack Overflow

Here's a pretty basic implementation: http://jsfiddle.net/CQPeU/ var can = document.get

电玩女神/ 2022年10月09日 05:57/ 0 赞/ 24 阅读

相关 ios html dom bounce,scroll - ipad safari: disable scrolling, and bounce effect? - Stack Overflow

Try this JS solution that toggles webkitOverflowScrolling style. The trick here is that

向右看齐/ 2022年10月07日 09:56/ 0 赞/ 7 阅读

相关 html5 file ajax,javascript - Using HTML5 file uploads with AJAX and jQuery - Stack Overflow

With jQuery (and without FormData API) you can use something like this: function readFi

清疚/ 2022年10月07日 04:49/ 0 赞/ 157 阅读

相关 php fpdf html,php - HTML/FPDF Table - Stack Overflow

I am working on printing this report to pdf: ![NLfM3.png][] But all I get is this: ![

墨蓝/ 2022年10月07日 00:43/ 0 赞/ 163 阅读

相关 html string to dom,javascript - Converting HTML string into DOM elements? - Stack Overflow

Here is a little code that is useful. var uiHelper = function () \{ var htmls = \{\};

小鱼儿/ 2022年10月06日 13:54/ 0 赞/ 23 阅读

相关 html5 imports,html - HTML5 Imports not working - Stack Overflow

The correct to do this is through server side pages includes or through JavaScript. PHP

Myth丶恋晨/ 2022年10月04日 14:54/ 0 赞/ 15 阅读

相关解决使用了属性overflow:scroll、overflow-y:scroll、overflow-x:scroll；的网页在iPhone iOS Safari浏览器中滑动不流畅问题

解决使用了属性overflow:scroll、overflow-y:scroll、overflow-x:scroll;的网页在iPhone iOS Safari浏览器中滑动不流

落日映苍穹つ/ 2022年09月06日 00:20/ 0 赞/ 159 阅读

相关 -webkit-overflow-scrolling:touch及ios滚动

[https://www.cnblogs.com/xiahj/p/8036419.html][https_www.cnblogs.com_xiahj_p_8036419.htm

ゞ浴缸里的玫瑰/ 2022年04月15日 03:42/ 0 赞/ 153 阅读

相关 ios overflow: scroll卡顿 -webkit-overflow-scrolling:touch的bug多，解决方案

前段时间开发公司移动端官网（[m.rys.cn][] ，vue+vux开发），遇到的ios下滑动卡顿，没有惯性的问题百度之后： -webkit-overflow-scro

╰半橙微兮°/ 2021年09月19日 00:16/ 0 赞/ 348 阅读