两栏分别上下滑动

html,body{height: 100%}
body{background: #f2f2f2;-webkit-user-select:none;-webkit-text-size-adjust:none;}
.clearfix:after,.clearfix:before{content: "";display:table;}
.clearfix:after{clear: both;}
.clearfix{zoom:1;}
.wrap-img{ 100%;}
.fixImg{position: absolute; 100%;top:0;left: 0;}
@media screen and (min- 320px){
  .wrap{position: absolute;left: 0;top:102px; 100%;bottom: 0px;}
}
@media screen and (min- 360px) and (max- 375px){
  .wrap{position: absolute;left: 0;top:114px; 100%;bottom: 0px;}
}
@media screen and (min- 375px) and (max- 414px){
  .wrap{position: absolute;left: 0;top:119px; 100%;bottom: 0px;}
}
@media screen and (min- 414px){
  .wrap{position: absolute;left: 0;top:131px; 100%;bottom: 0px;}
}
.wrap-fl{float: left; min- 90px;  100px; height: auto; overflow-y: auto; max-height: 100%;-webkit-overflow-scrolling: touch;} 
.wrap-fl ul li{height: 49px; line-height: 49px; border-bottom: 1px solid #e0e0e0;background: #fff7e7; }
.wrap-fl ul li.current{background: #ffffff;}
.wrap-fl ul li i{display: block;margin-left:4px;86px;background: url("http://img.v3beta.tootoo.cn/images/wap/active/importedFood/icon01.png") no-repeat;background-size: 86px auto;}
.wrap-fl ul li i.icon01{height: 35px;background-position:0 12px;}
.wrap-fl ul li i.icon02{height: 36px;background-position:0 -32px;}
.wrap-fl ul li i.icon03{height: 38px;background-position:0 -82px;}
.wrap-fl ul li i.icon04{height: 34px;background-position:0 -128px;}
.wrap-fl ul li i.icon05{height: 34px;background-position:0 -178px;}
.wrap-fl ul li i.icon06{height: 34px;background-position:0 -224px;}
.wrap-fl ul li i.icon07{height: 38px;background-position:0 -270px;}
.wrap-fl ul li i.icon08{height: 38px;background-position:0 -318px;}
.wrap-fl ul li i.icon09{height: 38px;background-position:0 -364px;}
.wrap-fl ul li i.icon10{height: 38px;background-position:0 -408px;}
.wrap-fl ul li i.icon11{height: 38px;background-position:0 -454px;}
.wrap-fl ul li i.icon12{height: 38px;background-position:0 -502px;}
.wrap-fl ul li span{color:#575757;margin-left: 8px;}
.wrap-fr{margin-left: 100px;background: #ffffff;padding-left: 6px;height: auto; overflow-y: auto; max-height: 100%;-webkit-overflow-scrolling: touch;}
.wrap-fr ul li>a{position:relative;display: block;float: left;border:1px solid #e0e0e0;border-radius: 5px;padding:4px;}
.wrap-fr ul li{padding: 15px 10px 15px 6px;border-bottom: 1px solid #e0e0e0;height: 84px;}
.wrap-fr ul li div{margin-left: 90px;}
.wrap-fr ul li div a{display: block;height: 32px;font-size:12px;line-height:16px;color:#030303;overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} 
.wrap-fr ul li a span.no-send{display: block;font-size: 12px;color: #fff;height: 20px;line-height: 20px;text-align: center;background: rgba(37,37,37,.5);border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;position: absolute;bottom: 2px; 92%;}
.wrap-fr ul li div span{display: block;}
.wrap-fr ul li div span.s01{color: #c83232;font-weight: bold;font-size: 16px;margin-top: 6px;}
.wrap-fr ul li div span.s02{margin-bottom: 15px;}
.wrap-fr ul li div span.s02,.wrap-fr ul li div span.s02 em{color: #838383;font-size: 12px;}
.wrap-fr ul li a img{ 72px;height: 72px;}
.search-empty{background: url("http://img.v3beta.tootoo.cn/images/wap/active/importedFood/search_empty.png") no-repeat;  165px; height: 165px; background-size: 165px auto; margin: 60px auto 20px; } 
.p-noGood{text-align: center;}
.none-bg{background: none;}
#goTopBtn { 40px; height: 40px; display:none;position: fixed; z-index: 2; right: 20px; bottom: 20px; cursor: pointer;  background: url(http://misc.ttmimg.com/images/wap/icon/gotop.png) no-repeat; background-size: 40px 40px; }

<div class="wrap-img">
    <img src="<{$smarty.const.WEB_IMG_PATH_WAP}>active/importedFood/image01.jpg" class="fixImg" />
  </div>
  <div class="clearfix wrap mt">
     <div class="wrap-fl">
        <ul>
          <li class="current" id="14592" ng-click="getDatas(14592)"><i class="icon01"></i></li>
          <li id="14593" ng-click="getDatas(14593)"><i class="icon02"></i></li>
          <li id="13138" ng-click="getDatas(13138)"><i class="icon03"></i></li>
          <li id="12523" ng-click="getDatas(12523)"><i class="icon04"></i></li>
          <li id="12524" ng-click="getDatas(12524)"><i class="icon05"></i></li>
          <li id="13139" ng-click="getDatas(13139)"><i class="icon06"></i></li>
          <li id="13140" ng-click="getDatas(13140)"><i class="icon07"></i></li>
          <li id="14247" ng-click="getDatas(14247)"><i class="icon08"></i></li>
          <li id="14248" ng-click="getDatas(14248)"><i class="icon09"></i></li>
          <li id="12511" ng-click="getDatas(12511)"><i class="icon10"></i></li>
          <li id="14473" ng-click="getDatas(14473)"><i class="icon11"></i></li>          
          <li id="14330" ng-click="getDatas(14330)"><i class="icon12"></i></li>          
        </ul>
      </div> 
       <div class="wrap-fr" ng-show="goods">
         <ul>
           <li class="clearfix" ng-repeat="data in datas">
             <a ng-href="{{data.detail_url}}" ng-click="goodetail(data)">
              <img ng-src="{{data.picPath}}" />
             </a>
             <div>
                <a ng-href="{{data.detail_url}}" ng-click="goodetail(data)"><span ng-bind="data.goodsTitle"></span></a>
                <span class="s01" ng-bind="data.canBuyFlag == 0?'无货':'￥'+ data.skuInfo.showPrice"></span>
                <span class="s02">已有<em ng-bind="data.reviewTotal"></em>人评价</span>
             </div>
           </li>           
         </ul>                
      </div>   
       <div id="goTopBtn"></div>  
      <section class="clearfix wrap-fr mt none-bg" ng-show="empty">
          <div class="search-empty"></div>
          <p class="p-noGood">暂无商品，先看看其他吧！</p>
      </section>      
  </div>

以上代码中标红的部分，为主要代码，其他代码可以根据自己的需求写