解决苹果微信浏览器下拉回弹效果

8

解决苹果微信浏览器下拉回弹效果

el.scrollTop; if (top ===0) { el.scrollTop =1; } else if (top + el.offsetHeight === totalScroll) { el.scrollTop = top -1; } }); el.addEventListener('touchmove', function(evt) { if (el.offsetHeight < el.scrollHeight) evt._isScroller = true; });};overscroll(document.querySelector('.content'));在苹果微信浏览器中,当用户在页面上下滑动时,会出现一个回弹效果,即当用户滑动到页面的顶部或底部时,页面会有一个回弹的动作。这个回弹效果在一些情况下可能会影响用户体验,因此我们需要对这个回弹效果进行处理,使页面在滑动到顶部或底部时不再出现回弹动作。上面的代码就是一个解决苹果微信浏览器下拉回弹效果的方法。首先,我们定义了一个名为overscroll的函数,这个函数接受一个参数el,表示需要滑动的部分。在函数中,我们给el添加了两个事件监听器,分别是touchstart和touchmove事件。在touchstart事件监听器中,我们获取了当前滚动的位置top、总滚动高度totalScroll和当前滚动高度currentScroll。如果用户滑动到页面顶部,即top为0时,我们将页面滚动位置设置为1,这样就避免了页面的回弹效果。如果用户滑动到页面底部,即top加上el的高度等于totalScroll时,我们将页面滚动位置设置为top减去1,同样避免了回弹效果。在touchmove事件监听器中,我们判断如果el的高度小于总滚动高度,则将事件对象的_isScroller属性设置为true。这样就可以避免在滑动过程中出现回弹效果。最后,我们调用overscroll函数,并传入需要滑动的部分的选择器,即'.content'。这样就可以在苹果微信浏览器中解决下拉回弹效果的问题。

浏览器苹果微信

版权声明:除非特别标注,否则均为网络文章,侵权请联系站长删除。

上一篇 苹果手机微信声音小怎么调大声_怎么把手机声音变大,试试这种方法

下一篇 苹果微信分身版ios_苹果手机怎么下载微信分身