原文地址：https://segmentfault.com/a/1190000007301527

一篇解决 iOS下拉回弹的文章分享给大家。加了些注释、并且应用在vue中。再次感谢原作者。

<template><div class="container"><div class="scroll" style="height:150px;overflow:auto"><div class="takePosition"><div class="top">top</div><div class="body">body</div><div class="footer">footer</div></div>                </div>占位 <br>占位 <br>占位 <br>占位 <br>占位 <br>占位 <br>占位 <br>占位 <br><div style="height:350px;overflow:auto"><div class="takePosition"></div>               </div>        </div>
</template><script>
export default {name:"PartScroll",mounted(){this.partScroll()},methods:{//部分元素可以滚动，其余不可以滚动partScroll(){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;}});el.addEventListener('touchmove', function(evt) {console.log('el总的',el);console.log('qqq1',el.offsetHeight,'qqq2',el.scrollHeight)if(el.offsetHeight < el.scrollHeight)//这一步意味着该元素可以滚动evt._isScroller = true;});}overscroll(document.querySelector('.scroll'));document.body.addEventListener('touchmove', function(evt) {console.log('evt:',evt);if(evt._isScroller) {return};// 阻止默认事件evt.preventDefault();}, {passive: false});}}
}
</script><style lang="scss" scoped>.scroll{.takePosition{height: 300px;background: wheat;position: relative;.top{position: absolute;top: 0;}.body{position: absolute;bottom: 50%;}.footer{position: absolute;bottom: 0;}}}
</style>

请注意

如果想让一个元素可以滑动就在那个元素上，加上 class="scroll"。这是必须的！！！

原文地址：https://segmentfault.com/a/1190000007301527

解决iOS下拉回弹方法二相关推荐

android组件的下拉回弹,Android自定义控件仿ios下拉回弹效果
网上有很多类似的文章,大多数还是继承listview来实现(主要是listview.addHeaderView()和listview.addFooterView在listview的首尾添加view,也 ...
Android仿Ios下拉回弹,Android ReboundScrollView仿IOS拖拽回弹效果
初衷: 其实github上有很多这种ScrollView的项目,但是不得不说功能太多太乱了,我就只是想要一个简单效果的ScrollView,另外监听下滑动距离而已,想想还是自己写了个. 这里先说下思路 ...
PullScrollView详解（五）——完全使用listview实现下拉回弹（方法二）
前言:当你感到不舒服的时候就是成长的时候.入职阿里时学长跟我说的这句话,一直记得.到死时,人们往往不会因为自己做过什么而后悔,而常常会因为没做什么而后悔.趁你还有激情,加油! 相关文章: 1.< ...
小程序IOS页面下拉回弹效果
小程序IOS页面下拉回弹效果小程序在ios系统上的橡皮筋回弹效果,是ios特有的,目前小程序没有特有的方法去控制.根据业务需求不想要这个回弹的效果,故此记录一下解决方案: 方案一:当页面内容比较 ...
移动端阻止ios弹性滑动_禁止iOS的弹性滚动微信的下拉回弹
禁止iOS的弹性滚动微信的下拉回弹一种方法: html头部添加然后将页面body的高度设为window的高度 $("body").height( $(window).heig ...
android 微信回弹,完美解决safari、微信浏览器下拉回弹效果。
完美解决safari.微信浏览器下拉回弹效果,只保留局部回弹效果. CSS代码 .box{ overflow: auto; -webkit-overflow-scrolling: touch; } H ...
自定义下拉回弹View-掌握View冲突处理
文本核心学习自文章: 一个Demo带你彻底掌握View的滑动冲突修改相应代码,拓展原文只能下拉不能拖动上下滑动的问题. 下面先上效果图: 整体可以滑动,下拉图片放大,上拉缩小,拉动过程中释放,布局自 ...
移动端 -- 禁止苹果微信浏览器的下拉回弹
需求:实现页面中有个可拖动的悬浮球问题:在ios中,由于微信浏览器存在下拉回弹的特性,所以悬浮球拖拽的时候会引起整个页面的拖动,所以需要禁止掉浏览器默认事件,这样在拖动悬浮球时就不会出现问题了解决 ...
PullScrollView详解（四）——完全使用listview实现下拉回弹（方法一）
前言:今天看到一篇文章,非常喜欢其中的一句话,送给大家--如果万事俱备,那还要你干嘛. 相关文章: 1.<PullScrollView详解(一)--自定义控件属性> 2.<PullS ...

解决iOS下拉回弹方法二

请注意

解决iOS下拉回弹方法二相关推荐

最新文章

热门文章