个人中心
文章发布
退出
作者热门文章
- r - 以节省内存的方式增长 data.frame
- ruby-on-rails - ruby/ruby on rails 内存泄漏检测
- android - 无法解析导入android.support.v7.app
- UNIX 域套接字与共享内存(映射文件)
24
4
既然转基因种子已经放出来了，我们可以好好谈谈了!
看起来在 iOS7 中“-webkit-overflow-scrolling: touch”被破坏了。最初不在屏幕上的元素的触摸事件不会触发(或者在某些情况下只是不可靠)。
这是一个例子:
<!DOCTYPE html><html>
<head><title>TEST</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes" />
<style>
#scrollbox {
position: fixed;
top: 0px;
width: 100%;
height: 100%;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
.touchDiv {
position: relative;
width:100%;
height:80px;
background-color: #FFBBBB;
}
ul, li {
text-indent: 0px;
list-style: none;
padding: 0px;
margin: 0px;
}
li {
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #333;
}
</style>
<script type="text/javascript">
function onBodyLoad() {
var touchDiv = document.getElementById("bottomDiv");
touchDiv.ontouchstart = function(e) {
alert("touched");
};
touchDiv = document.getElementById("topDiv");
touchDiv.ontouchstart = function(e) {
alert("touched");
};
}
</script>
</head>
<body onload="onBodyLoad()">
<div id='scrollbox'>
<div id="topDiv" class="touchDiv">Fires an event when touched</div>
<ul>
<li><a href='#' onclick="alert('1')">Link 1</a></li>
<li><a href='#' onclick="alert('3')">Link 3</a></li>
<li><a href='#' onclick="alert('4')">Link 4</a></li>
<li><a href='#' onclick="alert('5')">Link 5</a></li>
<li><a href='#' onclick="alert('6')">Link 6</a></li>
<li><a href='#' onclick="alert('7')">Link 7</a></li>
<li><a href='#' onclick="alert('8')">Link 8</a></li>
<li><a href='#' onclick="alert('9')">Link 9</a></li>
<li><a href='#' onclick="alert('10')">Link 10</a></li>
<li><a href='#' onclick="alert('11')">Link 11</a></li>
<li><a href='#' onclick="alert('12')">Link 12</a></li>
<li><a href='#' onclick="alert('13')">Link 13</a></li>
<li><a href='#' onclick="alert('14')">Link 14</a></li>
<li><a href='#' onclick="alert('15')">Link 15</a></li>
<li><a href='#' onclick="alert('16')">Link 16</a></li>
<li><a href='#' onclick="alert('17')">Link 17</a></li>
<li><a href='#' onclick="alert('18')">Link 18</a></li>
<li><a href='#' onclick="alert('19')">Link 19</a></li>
<li><a href='#' onclick="alert('20')">Link 20</a></li>
<li><a href='#' onclick="alert('21')">Link 21</a></li>
<li><a href='#' ontouchstart="alert('22')">Link 22</a></li>
</ul>
<div id="bottomDiv" class="touchDiv">Fires an event when touched 2</div>
</div>
</body>
我猜这会破坏大多数移动优化的网络应用程序。
上面的代码有什么问题吗？和/或是否有任何解决方法？
(我已经向 apple 提出了一个错误 - 前段时间，但没有回应)
最佳答案
在 apple dev forums 上似乎有解决此问题的方法
非常感谢 Baicoianu 先生。
基本上，您需要监听父滚动 div 上的触摸事件。所以在我的例子中添加:
document.getElementById("scrollbox").addEventListener('touchstart', function(event){});
到 onBodyLoad 函数。
我猜这是一些事件传播问题，可以通过在更高级别进行监听来解决。
关于ios - `-webkit-overflow-scrolling: touch` 因 iOS7 中的初始屏幕外元素而损坏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18736297/
24
4
0
我试图弄清楚如何为聊天气泡制作外 Angular 圆形设计，以获得所需的结果: 我必须使用气泡作为不同背景的组件，没有相同和纯色，但有一些设计元素，所以气泡周围的空间必须是透明的: 我试过将元素添加为
我尝试了 display:table-cell 但它没有用。我怎样才能在div中显示这个词。现在它显示溢出了 div。我在我的网页上使用 CSS2。提前致谢。 Visit W3Schools
我有一个使用 CSS 隐藏在 View (对于移动设备)之外的菜单: #filter-column { position:absolute; left:-400px; } 当用户单击链
我想创建一个这样的问题行 http://imageshack.us/photo/my-images/200/questionh.png/ 此时我的html源是: question label
我要mock a class with Ruby . 如何编写处理样板代码的方法？ 以下代码: module Mailgun end module Acani def self.mock_mail
请不要担心循环，但我的问题是关于这些关键字:outer、middle 和 inner。它们不是声明为实例变量，为什么IDE让代码编译？我在谷歌上搜索了一下，这是java标签吗？ Java中的某种关键字
我有一个数据框(df)，看起来像， Id Name Activity. 1 ABC a;sldkj kkkdk 2 two
Elasticsearch内存中有哪些东西可以使搜索如此快速？ 是所有json本身都在内存中，还是仅倒排索引和映射将在内存中24 * 7？ 最佳答案 这是一个很好的问题，然后简而言之就是: 不仅仅是数
我正在尝试添加用户在用户界面上选择的值。对于数据库中的特定列，我已经与数据库建立了连接，当我按“保存”时，新的 id 会添加到数据库中，控制台中不会显示任何错误，但我要提交的值不会放入数据库，我怎样才
我不确定这个问题是否应该涉及电子领域，但由于它是关于编程的，所以我在这里问了它。 我正在制作一个数字时钟，使用由移位寄存器供电的 LED，而不是 7 段显示器。无论如何，当使用 CCS 编译代码时，我
我希望用户在 div 中选择文本 (html)。然而，这样做会在浏览器中显示选择背景，也在 div 之外。 我可以用(参见 http://jsfiddle.net/lborgman/aWbgT/)来防
我有以下 Razor View @{ ViewBag.Title = "UserCost"; }
我使用 KineticJS 和 D3.js 制作了以下内容。当用户将鼠标悬停在其中一个点上时，我使用 KineticJS 让我弹出工具提示。但是，由于 Canvas 的边界，工具提示似乎被切断了。有没
关闭。这个问题需要更多focused .它目前不接受答案。 想改进这个问题吗？ 更新问题，使其只关注一个问题 editing this post . 关闭 2 年前。 Improve this qu
我正在使用 primefaces 学习 Java Web 和 jsf。 我的项目当前只有一个index.xhtml 文件，当我访问localhost:8080/appname/时，index.xhtm
我是 ios 新手。 我有一个 View ，其中我使用 Quarts 核心绘制了一个圆圈。 我在该圆圈中放置了一个 UIButton，并赋予了拖放该按钮的功能。 现在我想要限制按钮不能被拖出那个圆圈区
这个问题已经有答案了: How to add two strings as if they were numbers? [duplicate] (20 个回答) How to force JS to
我正在创建简单的文本从右侧滑动到页面的 css 动画。我正在使用 jQuery 通过向元素添加一个类来触发动画。但是起始位置必须在视口(viewport)之外，这会触发底部滚动条出现。如何预防？ 这是
我编写了一个简单的代码来评估一段代码并将输出写入文件。这样它减少了我的一些，因为我需要很多很多文件，每一行都包含返回值! 无论如何，我正在使用的代码是: #!/usr/bin/ruby -w def
所以我试图在我的一款游戏中加入一个非常基本的“手电筒”式的东西。 我让它工作的方式是在我的游戏屏幕顶部有一个层，这个层会绘制一个黑色矩形，不透明度约为 80%，在我的游戏场景顶部创建黑暗的外观。 cc
我是一名优秀的程序员,十分优秀！