微信开发安卓页面出现两个滚动条其中一条无法滚动可以采用局部区域滚动解决

      问题描述：图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一下，避免他们重叠在一起。这下好了，用了拉伸特性，什么尺寸的手机都可以满屏拉伸，而且记录内容也可以显示完全。

       至此，就将下拉菜单跟记录列表区域分开成两个区域，分别使用各自的滚动条，大家都不会妨碍对方滚动，可以收工啦。