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

这篇具有很好参考价值的文章主要介绍了【uniapp】小程序中的scroll-view禁止橡皮筋回弹效果以及隐藏滑动条。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

scroll-view | 微信开放文档

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

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

scroll-view | uni-app官网

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

以下为一个示例，复制粘贴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>

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