css - html5中的touch silde和mouse scroll有什么不同?

标签 css html touch

现在我有一个页面,其标记如下:

<!DOCTYPE html>
<html>
<head></head>
<body>
  <div id="main">
    <div id="content">
       many contents here, more than one page.
    </div>
  </div>
</body>

目前,我可以使用触摸滑动(在我的平板上)和鼠标滚动(在我的电脑上)滚动页面:

但是一旦我应用了以下 css:

#main {
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
}

该页面不受触摸滑动的影响,但在鼠标滚动时仍能正常工作。为什么?

我想让第二种情况的滚动都正常,并且很想知道触摸滑动鼠标滚动之间的区别。

请帮忙。

最佳答案

Overflow:auto 会导致触摸设备滚动出现问题。 尝试使用 overflow:hidden 或 overflow:scroll 代替。

关于css - html5中的touch silde和mouse scroll有什么不同?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24819703/

相关文章:

html - 从 HTML 表下载 CSV

html - 下拉导航菜单 <li> 居中问题

javascript - 修改返回的对象

javascript - 使用触摸事件在 HTML5 Canvas 上绘制正方形

HTML 类引用

javascript - 向下滚动页面时如何使 Logo 出现在固定菜单中

php - Linux 命令从 php 脚本输出填充文件

jquery - 在 iOS 或任何触摸设备上双击

php - CSS 仅在 Firefox 中显示,其他不显示

html - Bootstrap 3 - HTML 表格和包装 div 之间的 1px 右间隙