CSS超出隐藏并且能滚动

迷南。 2022-09-16 04:59 200阅读 0赞

效果图

![f9b9cf2309c04dc8a212061db8459d70.gif][]

实现CSS代码：

height: 500rpx;
    overflow-x: hidden;
    overflow-y: scroll;

效果图的代码：

<view class="mxBoom" v-show="mxBoom">
    			<view class="mxBoomContent">
    				<view class="mxBoomTip">
    					苗豆明细
    				</view>
    				<view class="p_r mxTitle">
    					<view class="">
    						获取日期
    					</view>
    					<view class="">
    						详情
    					</view>
    					<view class="">
    						苗豆变更
    					</view>
    				</view>
    				<view class="jiluList">
    
    					<view class="p_r mxTxt" v-for="(item,index) in jiluList">
    						<view class="">
    							{
       {item.create_time}}
    						</view>
    						<view class="">
    							{
       {item.desc}}
    						</view>
    						<view class="">
    							{
       {item.values}}
    						</view>
    					</view>
    				</view>
    			</view>
    			<image :src="xIcon" class="xIcon" @click="mxBoom=false"></image>
    		</view>

CSS

.mxBoom {
    		position: fixed;
    		width: 100vw;
    		height: 100vh;
    		z-index: 999;
    		top: 0;
    		left: 0;
    		background-color: rgba(0, 0, 0, 0.5);
    
    		.xIcon {
    			margin-top: 24rpx;
    			width: 70rpx;
    			height: 70rpx;
    			text-align: center;
    			position: relative;
    			left: 50%;
    			margin-left: -35rpx;
    		}
    
    		.mxBoomContent {
    			width: 80vw;
    			margin-left: 10vw;
    			margin-top: 120rpx;
    			height: 900rpx;
    			background-color: #FFFFFF;
    			border-radius: 40rpx;
    
    			.jiluList {
    				height: 500rpx;
    				overflow-x: hidden;
    				overflow-y: scroll;
    			}
    
    			.mxTxt {
    
    				width: 90%;
    				margin-left: 5%;
    				height: 60rpx;
    				line-height: 60rpx;
    				text-align: center;
    				border-bottom: 1rpx solid #F1F1F1;
    
    				view {
    					color: #333;
    					font-size: 28rpx;
    					width: 33%;
    					text-align: center;
    				}
    			}
    
    			.mxTitle {
    				margin-bottom: 14rpx;
    				width: 90%;
    				margin-top: 50rpx;
    				margin-left: 5%;
    				text-align: center;
    				border-bottom: 1rpx solid #d0d0d0;
    
    				view {
    					color: #dfb464;
    					font-weight: 600;
    					font-size: 32rpx;
    					padding-bottom: 16rpx;
    
    					width: 33%;
    				}
    			}
    
    			.bolang {
    				width: 100%;
    				height: 22rpx;
    			}
    
    			.mxBoomTip {
    				width: 100%;
    				border-radius: 40rpx 40rpx 0 0;
    				font-size: 50rpx;
    				letter-spacing: 6rpx;
    				font-weight: 600;
    				text-align: center;
    				background-color: $red;
    				height: 230rpx;
    				line-height: 230rpx;
    				color: #fff;
    			}
    		}
    	}

[f9b9cf2309c04dc8a212061db8459d70.gif]: /images/20220828/5c0ad6b2172d40caaa6720bdf2d4ec52.png