100％的高度元素不能滚动移动

我的代码100％的高度元素不能滚动移动

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
<style> 
    html,body {margin: 0;padding: 0;box-sizing: border-box;} 
    html{ 
     height: 100%; 
    } 
    body{ 
     height: 100%; 
    } 
    .app { 
     height: 100%; 
    } 
    .page { 
     height: 100%; 
     background: linear-gradient(to bottom, #c2e59c , #64b3f4); 
     position: relative; 
    } 
    .chat { 
     height: 100%; 
     position: absolute; 
     top: 0; 
     bottom: 0; 
     right: 0; 
     left: 0; 
     overflow: scroll; 
    } 
    p{ 
     padding: 155px 5px; 
     border: solid 1px red; 
    } 
</style> 
</head> 
<body> 
<div class="app"> 
    <div class="page"> 
     <div class="chat"> 
      <p> 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
       quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
       consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
      </p> 
      <p> 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
       quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
       consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
      </p> 
      <p> 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
       quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
       consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
      </p> 
      <p> 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
       quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
       consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
      </p> 
     </div> 
    </div> 
</div> 
</body> 
</html>

这是一个简单的整页的聊天框。看上去不错。只有一个问题，它不能在移动设备上很好地滚动，当你不接触时它会停止滚动，它没有像它应该那样的连续性。

任何想法为什么是这样？

针对手机测试现场演示：http://demo.thatilike.com

记：你不会看到在移动版Chrome模式的问题，它需要在真正的移动

来源

2017-02-04 angry kiwi

测试添加-webkit-overflow-scrolling: touch;到滚动的元素。这将增加动力滚动到触控设备上的元素。但一定要将overflow-y: scroll保留为桌面。

来源

2017-02-05 05:11:31 startamovement

通过在桌面上保留'overflow-y：scroll'，你的意思是什么？ –

100％的高度元素不能滚动移动

回答

相关问题