uniapp小程序当页面内容超出时显示滚动条,不超出时不显示---样式自定义

uniapp小程序当页面内容超出时显示滚动条,不超出时不显示---样式自定义_第1张图片uniapp小程序当页面内容超出时显示滚动条,不超出时不显示---样式自定义_第2张图片

使用scroll-view中的show-scrollbar属性 注意:需要搭配enhanced使用 否则无效
	
					
						{{vehicleCartinfo}}
					
				

滚动条样式自定义

注意:此代码在ios情况下滚动条需要滑动时才显示并且不滑动过后就会隐藏

安卓情况下正常显示

/deep/ .u-transition {
			z-index: 19999 !important;
		}

		// 滚动条样式
		/deep/ ::-webkit-scrollbar {
			/*滚动条整体样式*/
			width: 2px !important;
			height: 1px !important;
			background: #ccc !important;
			display: block !important;
		}

		/deep/ ::-webkit-scrollbar-thumb {
			/*滚动条里面小方块*/
			border-radius: 10px;
			box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
			background-color: #bfbfbf;
		}

		/deep/ ::-webkit-scrollbar-track {
			background: #f0f0f0;
		}

你可能感兴趣的:(uni-app,小程序,前端,javascript,html)