Android较低版本(<5.2) 页面默认Select选择框效果的BUG解决
Bug描述：
使用低版本安卓(<5.2),在微信上打开网页,点击下拉框，会出现如下图所示的用来展示select选项的弹出框；
在选项较少的时候，可以向下滑动，将选项滑到底部
滑动前：
滑动后：
期望达到的效果：
解决方案：
判断是否是微信环境:
function isWeixinBrowser(){
return /micromessenger/.test(navigator.userAgent.toLowerCase());
}
判断安卓版号:
var userAgent = navigator.userAgent;
console.info(userAgent);
var index = userAgent.indexOf("Android");
if(index >= 0){
var androidVersion = parseFloat(userAgent.slice(index+8));
// 安卓版本小于5.2
if(androidVersion < 5.2){
//event
}
}
引入FancySelect来解决select弹出窗效果:
github地址: https://github.com/paulstraw/FancySelect
具体代码DEMO：
<!doctype html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Android较低版本(<5.2) 页面默认Select选择框效果的BUG解决</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://code.octopuscreative.com/fancyselect/fancySelect.js"></script>
<style type="text/css">
*{margin: 0;padding:0;box-sizing: border-box;}
.container{
width: 86%;
margin-top: 7%;
margin-left: 7%;
}
div.fancy-select {
position: relative;
font-size: 16px;
}
div.fancy-select.disabled {
opacity: 0.5;
}
div.fancy-select div.trigger {
border-radius: 4px;
cursor: pointer;
padding: 10px 24px 9px 9px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
position: relative;
background: #99A5BE;
border: 1px solid #99A5BE;
border-top-color: #A5B2CB;
color: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
width: 100%;
transition: all 240ms ease-out;
-webkit-transition: all 240ms ease-out;
-moz-transition: all 240ms ease-out;
-ms-transition: all 240ms ease-out;
-o-transition: all 240ms ease-out;
}
div.fancy-select div.trigger:after {
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
border: 5px solid transparent;
border-top-color: #4B5468;
top: 20px;
right: 9px;
}
div.fancy-select div.trigger.open {
background: #4A5368;
border: 1px solid #475062;
color: #7A8498;
box-shadow: none;
}
div.fancy-select div.trigger.open:after {
border-top-color: #7A8498;
}
div.fancy-select ul.options {
position: absolute;
top: 40px;
left: 0;
visibility: hidden;
opacity: 0;
z-index: 9999;
width:98%;
max-height: 240px;
overflow: auto;
-webkit-overflow-scrolling: touch;
background: #fff;
border-radius: 8px;
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
div.fancy-select ul.options.open {
visibility: visible;
width: 86%;
position: fixed;
top:0;
bottom:0;
left:7%;
margin: auto;
opacity: 1;
}
.fancy-select ul.options li:last-child:after{
display: none;
}
.icon-close {
position: fixed;
top:-93px;
right:10%;
}
div.fancy-select ul.options.overflowing {
top: auto;
bottom: 40px;
}
div.fancy-select ul.options.overflowing.open {
top: auto;
bottom: 50px;
}
div.fancy-select ul.options li {
position: relative;
padding: 15px;
color: #666;
cursor: pointer;
white-space: nowrap;
text-align: center;
list-style: none;
}
div.fancy-select ul.options li:after{
content:'';
display: block;
width: 100%;
height: 1px;
position: absolute;
bottom:0;
left:0;
border-bottom: 1px solid #e7e7e7;
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
}
div.fancy-select ul.options li.hover{
background-color: #2eacff;
color: #fff;
}
div.fancy-select ul.options li.hover:after{
display: none;
}
.selectMask{
display: none;
width: 100%;
height: 100%;
position: fixed;
top:0;
left:0;
z-index: 900;
background-color: rgba(0,0,0,.2);
}
</style>
</head>
<body>
<div class="container">
<section>
<select>
<option >朋友</option>
<option >公立</option>
<option >七里香1</option>
<option >朋友2</option>
<option >公立3</option>
<option >七里香4</option>
<option >朋友5</option>
<option >公立6</option>
</select>
</section>
</div>
<div class="selectMask"></div>
<script type="text/javascript">
//判断是否微信
function isWeixinBrowser(){
return /micromessenger/.test(navigator.userAgent.toLowerCase());
}
//判断是否存在select
function isSelect(){
return $('body').find('select').length > 0;
}
//判断安卓版本
var userAgent = navigator.userAgent;
console.info(userAgent);
var index = userAgent.indexOf("Android");
if(index >= 0){
var androidVersion = parseFloat(userAgent.slice(index+8));
// 安卓版本小于5.2,微信环境，以及存在select
if(androidVersion < 5.2 && isWeixinBrowser() && isSelect() ){
//fancySelect方法调用:github地址(https://github.com/paulstraw/FancySelect)
$('select').fancySelect();
//显示隐藏mask
$('.trigger').bind('click',function(){
$('.selectMask').show();
});
$('.options,.selectMask').click(function() {
$('.selectMask').hide();
});
$('.basic').change(function() {
$('.selectMask').hide();
});
}
}
</script>
</body>
</html>
