版權聲明：本文爲博主原創文章，未經博主允許不得轉載。 https://blog.csdn.net/qq_26598303/article/details/51187943
問題描述：圖1.1是微信開發的一個頁面，頂部有一個下拉選擇菜單(自己寫的組件)用於選擇日期，選擇之後會出現該日期下的數據記錄，這時一個頁面會出現兩條滾動條(因爲滾動條太醜，我用::-webkit-scrollbar {width: 0px;}將滾動條隱藏了，這裏用紅色線條標註出來)，蘋果不會出現問題，安卓就會出現滾動不了下拉菜單的情況，一滾下拉菜單，整個頁面都滾起來了。
圖1.1
按道理來說應該不會出現這樣的情況，因爲如圖1.2，下拉菜單內容區域已經是局部滾動，而且由於下拉菜單內容區域z-index ：2，跟記錄內容區域根本不在同一個平面，
但安卓機確實滾動不了下拉菜單的內容。爲此，我覺得唯有將摒棄本來的瀏覽器滾動條，使用局部滾動條來解決。使兩個區域的滾動條徹底分離開來。
圖1.2
做法一：其實這個想法實現起來很簡單，首先幹掉瀏覽器的滾動條，然後爲記錄的內容區域加上一個滾動條。
①幹掉瀏覽器滾動條：html{ overflow:hidden; }
②爲記錄內容區域加上滾動條：.list-record{
height:xx ; overflow:auto }
做法很簡單，但是蛋疼就蛋疼在，上面紅色的height:xx
這個高度究竟是多少才合適？手機各種各樣的尺寸，怎麼樣才能一勞永逸搞定全部機子呢？我是新手，第一時間只能想到用百分比高度，那就來試一下，設置hegiht:100%
發現竟然滾不了……換個確定的高度試試，這裏用了IPHONE5的尺寸，所以高度試下568px，這下能動了……但即使是這樣，記錄會有顯示不全的問題，見圖1.3紅色部分
圖1.3
做法二：現在的問題就是，怎樣控制這個內容區域高度的問題。來想想還有什麼可以控制這個高度。要不試下用定位的拉伸特性？
①在內容區域設置 .list-record{ position:absolute;top:57px;bottom:0;right:0;left:0 }
由於內容區域上面有一個下拉選擇菜單，所以要top:57px一下，避免他們重疊在一起。這下好了，用了拉伸特性，什麼尺寸的手機都可以滿屏拉伸，而且記錄內容也可以顯示完全。
至此，就將下拉菜單跟記錄列表區域分開成兩個區域，分別使用各自的滾動條，大家都不會妨礙對方滾動，可以收工啦。