Html
    Css
    Js

    
                        
dl,dt,dd,ul {
	margin:0;
	padding:0;
}
ul {
	list-style:none;
}
a {
	text-decoration:none;
}
.picker-box {
	-webkit-user-select:none;
}
.picker-box dt {
	background-color:#dbdbdb;
	padding:5px 20px;
}
.picker-box dd {
	padding:8px 20px;
	border-bottom:1px solid #dbdbdb;
}
.pro-picker,.city-picker {
	position:fixed;
	top:0;
	left:0;
	bottom:0;
	background-color:#fff;
	overflow:auto;
	width:100%;
}
.city-picker li {
	padding:10px 20px;
	border-bottom:1px solid #dbdbdb;
}
.navbar {
	position:fixed;
	top:50%;
	right:0;
	width:20px;
	-webkit-transform:translate(0,-50%);
	transform:translate(0,-50%);
	border-radius:5px;
}
.navbar a {
	display:block;
	text-align:center;
	color:gray;
}
.navbar.active {
	background-color:grey;
}
.navbar.active a {
	color:#fff;
}
.picker-box .prompt {
	display:block;
	width:40px;
	height:40px;
	line-height:40px;
	font-size:18px;
	border-radius:50%;
	background-color:gray;
	color:#fff;
	text-align:center;
	position:fixed;
	top:50%;
	left:50%;
	-webkit-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%);
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:2.1.1
 立即下载

城市定位选择

2
      遗憾0
      2017/8/14 13:38:22

      右边的主要是移动端的滑动,点击是有点问题

      回复
      yemeihanxing0
      2017/8/12 16:43:43

      滚动条挡住的怎么点

      回复