iOS13升级后-webkit-scrollbar自定义的滚动栏看不到？？

Yang_2048 2019-10-24 10:51:35

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>-webkit-scrollbar</title>

	<style>

	.container {

		height: 150px;

		width: 200px;

		overflow: auto;

	}

	.scroll {

		height: 100%;

	}

	.container::-webkit-scrollbar {

		width: 7px;

	}

	.container::-webkit-scrollbar-track {

		border-radius: 10px;

		box-shadow: inset 0 0 6px green;

	}

	.container::-webkit-scrollbar-thumb {

		background-color: blue;

		border-radius: 10px;

		box-shadow: 0 0 0 1px rgba(255, 255, 255, .3);

	}

	</style>

</head>

<body>

	<div class="container">

		<div class="scroll">

			iPhoneX</br>

			iPhoneX Max</br>

			iPhoneX MaxPro</br>

			iPhoneXI</br>

			iPhoneXI Max</br>

			iPhoneXI MaxPro</br>

			iPod</br>

			iPad</br>

			iPad Pro</br>

			iPad Mini</br>

			iPad Air</br>

			iMac</br>

			Mac Mini</br>

			MacPro</br>

		</div>

	</div>

</body>

</html>

上面的代码，在升级iOS13/iPadOS13之前的运行结果如下（运行平台：iPad， OS：iOS12.3）

但是在升级到iOS13/iPadOS13之后，滚动栏却看不到了，运行结果如下（运行平台：iPad，OS：iPadOS13.1）

----------------------------------分割线开始----------------------------------------
（上面的张图片是手动在Mac safari上截的图！！！由于我Mac上safari的版本是12.1.2，代码运行后没有发生滚动栏看不到的问题，所以上面的两张贴图宽度不一致（不要说我不是从iPad上截的图，怕麻烦，只是为了说明问题））
----------------------------------分割线结束----------------------------------------
如图所示，iOS升级后用-webkit-scrollbar自定义的滚动条消失了，当然还是有滚动的功能的！！！

为此我特地在caniuse上查了兼容性问题，完全OK（查询结果如下），此问题我缠绕我两天时间，仍没能解决，望各位大神能解决我的困惑