我要实现header、left、contain的经典布局，其中有个问题

szuzsq 2017-08-02 03:21:34

我的布局如图：

我是在移动端的。
其中有个问题就是，如果left内容太多的时候，我希望可以上下拖动这些内容。
我使用overflow这个属性，做出来的效果是这些内容，拖动时，一卡一卡的。
我见过别人的效果是可以平滑拖动的，在边缘的地方还会弹啊弹的。

我的测试代码如下：



<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />

<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="apple-mobile-web-app-status-bar-style" content="black">

<meta name="format-detection" content="telephone=no">

</head>

<body>

	<div style="width: 200px; height: 200px; overflow-y: auto; background: red;">

		<ul style="overflow-y: auto;">

			<li>清纯似少女</li>

			<li>清纯似少女</li>

			<li>清纯似少女</li>

			<li>清纯似少女</li>

			<li>清纯似少女</li>

			<li>清纯似少女</li>

			<li>清纯似少女</li>

			<li>清纯似少女</li>

			<li>清纯似少女</li>

			<li>清纯似少女</li>

			<li>清纯似少女</li>

			<li>清纯似少女</li>

			<li>清纯似少女</li>

			<li>清纯似少女</li>

			<li>清纯似少女</li>

			<li>清纯似少女</li>

			<li>清纯似少女</li>

			<li>清纯似少女</li>

			<li>清纯似少女</li>

			<li>清纯似少女</li>

			<li>清纯似少女</li>

			<li>清纯似少女</li>

			<li>清纯似少女</li>

			<li>清纯似少女</li>

			<li>清纯似少女</li>

			<li>清纯似少女</li>

			<li>清纯似少女</li>

			<li>清纯似少女</li>

		</ul>

	</div>

</body>

</html>

我上下拖动这些“清纯似少女”的时候，卡啊卡的。如果把外面的div去掉，那就很平滑的。



<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />

<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="apple-mobile-web-app-status-bar-style" content="black">

<meta name="format-detection" content="telephone=no">

</head>

<body>

	<ul style="overflow-y: auto;">

		<li>清纯似少女</li>

		<li>清纯似少女</li>

		<li>清纯似少女</li>

		<li>清纯似少女</li>

		<li>清纯似少女</li>

		<li>清纯似少女</li>

		<li>清纯似少女</li>

		<li>清纯似少女</li>

		<li>清纯似少女</li>

		<li>清纯似少女</li>

		<li>清纯似少女</li>

		<li>清纯似少女</li>

		<li>清纯似少女</li>

		<li>清纯似少女</li>

		<li>清纯似少女</li>

		<li>清纯似少女</li>

		<li>清纯似少女</li>

		<li>清纯似少女</li>

		<li>清纯似少女</li>

		<li>清纯似少女</li>

		<li>清纯似少女</li>

		<li>清纯似少女</li>

		<li>清纯似少女</li>

		<li>清纯似少女</li>

		<li>清纯似少女</li>

		<li>清纯似少女</li>

		<li>清纯似少女</li>

		<li>清纯似少女</li>

	</ul>

</body>

</html>