HTML+CSS实现滚动效果加隐藏滚动条

HTML+CSS实现滚动效果加隐藏滚动条

有的时候为了体验效果好，一个区域中显示的内容有限，这时候可以把多余内容隐藏进行滚动显示，为了效果好把滚动条进行隐藏。
我们需要一个父元素和子元素：
父元素设置宽和overflow:hidden;

				width: 100%;
				overflow:hidden;

子元素设置的宽要比父元素宽

						width:calc(100% + 15rpx);
						padding-right:15rpx;
						overflow-y:scroll;
						box-sizing: border-box;

详细代码和效果图如下所示：

	<template>
		<view class="content">
			<view class="box">
				<view class="body">
					<view class="nav" v-for="(item, index) in list" :key="index">
						<text>{{ item.name }}</text>
					</view>
					<view class="navone" v-for="(item, index) in listone" :key="index">
						<text>{{ item.name }}</text>
					</view>
					
				</view>
			</view>
			
		</view>
	</template>
	<script>
		export default {
			data() {
				return {
					list: [
						{ name: '尹浩宇' },
						{ name: '尹浩宇' },
						{ name: '尹浩宇' },
						{ name: '尹浩宇' },
						{ name: '尹浩宇' },
					],
					listone: [
						{ name: '派大星' },
						{ name: '派大星' },
						{ name: '派大星' },
						{ name: '派大星' },
						{ name: '派大星' },
						{ name: '派大星' },
						{ name: '派大星' },
						{ name: '派大星' },
						{ name: '派大星' },
						{ name: '派大星' },
						{ name: '派大星' }
					]
				};
			}
		};
	</script>
	<style lang="scss" scoped>
		.content {
			padding: 30rpx 30rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			.box{
				width: 100%;
				overflow:hidden;
				.body{
					width:calc(100% + 15rpx);
					padding-right:15rpx;
					overflow-y:scroll;
					box-sizing: border-box;
					height: 600rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					background-color: #00557f;
					border-radius: 30rpx;
					.nav {
						width: 90%;
						height: 50rpx;
						background: #2c405a;
						color: #ffffff;
						margin-bottom: 20rpx;
						margin-top: 20rpx;
						border-radius: 30rpx;
						text-align: center;
					}
					.navone {
						width: 90%;
						height: 50rpx;
						background-color: #ff557f;
						color: #ffffff;
						margin-bottom: 20rpx;
						margin-top: 20rpx;
						border-radius: 30rpx;
						text-align: center;
					}
				}
			}
		}
	</style>