【uniapp】小程序中的scroll-view禁止橡皮筋回弹效果以及隐藏滑动条

 2.12.0版本更新  IOS 下 scroll-view 边界弹性控制 (同时开启 enhanced 属性后生效)   

scroll-view | 微信开放文档

---

 
 

2.1.5 +后即可用show-scrollbar属性来控制是否显示滚动条

scroll-view | uni-app官网

---

以下为一个示例，复制粘贴run以下即可看到效果，苹果12 13机型实测没有问题。（禁止回弹，隐藏滚动条）

<template>
	<view>
		<scroll-view scroll-y="true" class="con" :enhanced="true"
         :bounces="false" :show-scrollbar="false">

			<view> xxxxxxxxx111111xxxxxxxxxxxx </view>
			<br>
			<view> xxxxxxxxxxxxxxxxxxxxxxxx </view>
			<br>
			<view> xxxxxxxxxxxxxxxxxxxxxxxx </view>
			<br>
			<view> xxxxxxxxxxxxxxxxxxxxxxxx </view>
			<view> xxxxxxxxxxxxxxxxxxxxxxxx </view>
			<view> xxxxxxxxxxxxxxxxxxxxxxxx </view>
			<view> xxxxxxxxxxxxxxxxxxxxxxxx </view>
			<view> xxxxxxxxxxxxxxxxxxxxxxxx </view>

			<view> xxxxxxxxx22222xxxxxxxxxxxxxxx </view>
			<br>
			<view> xxxxxxxxxxxxxxxxxxxxxxxx </view>
			<br>
			<view> xxxxxxxxxxxxxxxxxxxxxxxx </view>
			<br>
			<view> xxxxxxxxxxxxxxxxxxxxxxxx </view>
			<view> xxxxxxxxxxxxxxxxxxxxxxxx </view>
			<view> xxxxxxxxxxxxxxxxxxxxxxxx </view>
			<view> xxxxxxxxxxxxxxxxxxxxxxxx </view>
			<view> xxxxxxxxxxxxxxxxxxxxxxxx </view>

			<view> xxxxxxxxx333333xxxxxxxxxxxxxxx </view>
			<br>
			<view> xxxxxxxxxxxxxxxxxxxxxxxx </view>
			<br>
			<view> xxxxxxxxxxxxxxxxxxxxxxxx </view>
			<br>
			<view> xxxxxxxxxxxxxxxxxxxxxxxx </view>
			<view> xxxxxxxxxxxxxxxxxxxxxxxx </view>
			<view> xxxxxxxxxxxxxxxxxxxxxxxx </view>
			<view> xxxxxxxxxxxxxxxxxxxxxxxx </view>
			<view> xxxxxxxxxxxxxxxxxxxxxxxx </view>

			<view> xxxxxxxxx44444xxxxxxxxxxxxxxx </view>
			<br>
			<view> xxxxxxxxxxxxxxxxxxxxxxxx </view>
			<br>
			<view> xxxxxxxxxxxxxxxxxxxxxxxx </view>
			<br>
			<view> xxxxxxxxxxxxxxxxxxxxxxxx </view>
			<view> xxxxxxxxxxxxxxxxxxxxxxxx </view>
			<view> xxxxxxxxxxxxxxxxxxxxxxxx </view>
			<view> xxxxxxxxxxxxxxxxxxxxxxxx </view>
			<view> xxxxxxxxxxxxxxxxxxxxxxxx </view>

			<view> xxxxxxxxx55555xxxxxxxxxxxxxxx </view>
			<br>
			<view> xxxxxxxxxxxxxxxxxxxxxxxx </view>
			<br>
			<view> xxxxxxxxxxxxxxxxxxxxxxxx </view>
			<br>
			<view> xxxxxxxxxxxxxxxxxxxxxxxx </view>
			<view> xxxxxxxxxxxxxxxxxxxxxxxx </view>
			<view> xxxxxxxxxxxxxxxxxxxxxxxx </view>
			<view> xxxxxxxxxxxxxxxxxxxxxxxx </view>
			<view> xxxxxxxxxxxxxxxxxxxxxxxx </view>

			<view> xxxxxxxxx6666xxxxxxxxxxxxxxx </view>
			<br>
			<view> xxxxxxxxxxxxxxxxxxxxxxxx </view>
			<br>
			<view> xxxxxxxxxxxxxxxxxxxxxxxx </view>
			<br>
			<view> xxxxxxxxxxxxxxxxxxxxxxxx </view>
			<view> xxxxxxxxxxxxxxxxxxxxxxxx </view>
			<view> xxxxxxxxxxxxxxxxxxxxxxxx </view>
			<view> xxxxxxxxxxxxxxxxxxxxxxxx </view>
			<view> xxxxxxxxxxxxxxxxxxxxxxxx </view>

		</scroll-view>

	</view>
</template>

<script>


</script>

<style>
	.con {
        //可视高度，需要在多大的盒子中进行滑动
		height: 100vh;
        width: 750rpx;
	}

    /*搜到2.1.5之前的解决方案 */
	/* 	::-webkit-scrollbar{
	     width: 0;
	     height: 0;
	     color: transparent;
	} */
</style>

还有一点要声明以下 ：此页面中有开启"disableScroll": true 属性，但并未对滑动产生影响。

---

补充：  height: 100vh; 为屏幕可视高度，如果需要在一块内进行滑动，让可视高度等于父盒子高度即可，如图所示：结合上面代码段看.con为代码段中的scroll-view的class