javascript - 允许触摸滚动以防溢出隐藏

Question

我正在构建一个响应式Web应用程序，我已将overflow:hidden应用于div，因为我正在桌面 View 中使用其他div处理滚动。现在我需要在设备中启用触摸滚动，因为另一个 div 对于小屏幕是不可见的。

我不想在设备中显示滚动条，因为我有相互依赖的 div。一个 div 滚动会影响其他 div 滚动，反之亦然。

$('.outer').on('scroll',function(e){
$('.outer').scrollLeft(e.currentTarget.scrollLeft);
});

.outer{
   width:200px;
}
.inner{
   width:400px;
  display:block;
  height:50%;
  background:#ccc;
}
.content{
  background:blue;
  height:100px;
  margin-bottom:10px;
  overflow:hidden;
}
.scrollPane{
  height:20px;
  overflow:auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content outer"><div class ="inner">
  aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></div>
<div class="content outer"><div class ="inner">
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div></div>
<div class="scrollPane outer"><div class ="inner"></div></div>

如何只允许触摸滚动并在所有情况下隐藏滚动条(android/ios)？

Answer 1

我通过使用触摸事件找到了解决方案。

$('.outer').on('scroll',function(e){
  $('.outer').scrollLeft(e.currentTarget.scrollLeft);
});
$('.outer').on('touchstart', handleTouchStart, false);        
$('.outer').on('touchmove', handleTouchMove, false);
$('.outer').on('touchend', handleTouchEnd, false);

var xDown = null;                                                        
var yDown = null;
var oldScrollPos = null;

function handleTouchStart(evt) {                                         
    xDown = evt.touches[0].clientX;                                      
    yDown = evt.touches[0].clientY;
    oldScrollPos = $('.outer').scrollLeft();
};                                                

function handleTouchMove(evt) {
  console.log('touch move')
    if ( ! xDown || ! yDown ) {
        return;
    }

    var xUp = evt.touches[0].clientX;                                    
    var yUp = evt.touches[0].clientY;

    var xDiff = xDown - xUp;
    var yDiff = yDown - yUp;

    if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*most significant*/
      console.log('moving horizontally');
          var newScrollLeft = oldScrollPos + xDiff;
      $('.outer').scrollLeft(newScrollLeft);
        if ( xDiff > 0 ) {
            /* left swipe */ 
        } else {
            /* right swipe */
        }                       
    } else {
        if ( yDiff > 0 ) {
            /* up swipe */ 
        } else { 
            /* down swipe */
        }                                                                 
    }
                                            
};


function handleTouchEnd(){
   /* reset values */
    xDown = null;
    yDown = null;
  oldScrollPos = null;
}

.outer{
   width:200px;
}
.inner{
   width:400px;
  display:block;
  height:50%;
  background:#ccc;
}
.content{
  background:blue;
  height:100px;
  margin-bottom:10px;
  overflow:hidden;
}
.scrollPane{
  height:20px;
  overflow:auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content outer"><div class ="inner">
  aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></div>
<div class="content outer"><div class ="inner">
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div></div>
<div class="scrollPane outer"><div class ="inner"></div></div>