標籤：
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>
Android較低版本(<5.2) 頁面預設Select選擇框效果的BUG解決
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
