- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试使用指针事件滚动。我意识到这不是滚动的正确方法。我正在创建一款具有“可变”滚动体验的游戏。
代码会“滚动”,但非常不稳定。 console.log 显示了一些奇怪的内容:scrollBy() 用 -6 调用(例如),然后立即用 6 再次调用。看来调用scrollBy() 会导致 onpointermove 再次被调用?
我猜我犯了一个菜鸟错误,触发了重复的事件。
我愿意尝试一种非常不同的方法。我认为使用指针事件是执行此操作的正确方法,因为它应该适用于鼠标和手指事件。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Scroll Guesture</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#target {
touch-action: pan-x;
}
</style>
</head>
<script>
var lastY;
var thisY;
function down_handler(event) {
lastY = Math.trunc(event.offsetY);
console.log("down_handler " + lastY);
}
function move_handler(event) {
thisY = Math.trunc(event.offsetY);
deltaY = lastY - thisY;
console.log("move_handler " + deltaY);
window.scrollBy(0, deltaY);
lastY = thisY;
}
function init() {
var el=document.getElementById("target");
el.onpointerdown = down_handler;
el.onpointermove = move_handler;
}
</script>
<body onload="init();">
<div id="target">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Placerat vestibulum lectus mauris ultrices eros. Interdum velit euismod in pellentesque massa placerat. Fermentum leo vel orci porta. Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Duis ut diam quam nulla porttitor massa. Nisl pretium fusce id velit ut tortor pretium viverra suspendisse. Sit amet cursus sit amet dictum sit amet justo. Lectus quam id leo in vitae. Posuere urna nec tincidunt praesent semper feugiat nibh sed pulvinar. Elit eget gravida cum sociis natoque penatibus. Tortor condimentum lacinia quis vel eros donec ac. Lectus mauris ultrices eros in cursus. Elit at imperdiet dui accumsan sit amet nulla.</p>
<p>Parturient montes nascetur ridiculus mus mauris. Aliquam faucibus purus in massa tempor nec. A arcu cursus vitae congue mauris rhoncus aenean vel elit. In arcu cursus euismod quis viverra. Dolor sit amet consectetur adipiscing elit. Enim nec dui nunc mattis enim ut tellus elementum. In aliquam sem fringilla ut. Eget arcu dictum varius duis at consectetur lorem. In ornare quam viverra orci sagittis eu volutpat odio facilisis. Blandit massa enim nec dui. Justo eget magna fermentum iaculis eu non diam phasellus. Phasellus vestibulum lorem sed risus ultricies tristique.</p>
<p>Odio facilisis mauris sit amet massa vitae. Feugiat in ante metus dictum. Commodo viverra maecenas accumsan lacus. Tristique risus nec feugiat in fermentum posuere. Praesent semper feugiat nibh sed pulvinar proin gravida hendrerit. Adipiscing bibendum est ultricies integer. Dignissim suspendisse in est ante in. Aenean pharetra magna ac placerat vestibulum. Netus et malesuada fames ac turpis egestas sed tempus. Egestas sed tempus urna et pharetra pharetra massa massa. Dictum non consectetur a erat nam. A iaculis at erat pellentesque adipiscing commodo. Odio aenean sed adipiscing diam donec adipiscing. Eget velit aliquet sagittis id consectetur purus ut faucibus pulvinar. Tortor pretium viverra suspendisse potenti. Risus ultricies tristique nulla aliquet. </p>
</div>
</body>
</html>
最佳答案
您的问题源于这里的这个小片段:event.offsetY
简而言之应该是event.clientY
至于为什么会这样:
<p>
转变为标记为<body>
或任何其他标签。@ScottJenson 还问:
I'm confused as to why move_handler() would be called with a deltaY of -10 followed by 10 (when using offsetY).
答案:
尝试将文本框放大,如下所示:
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Placerat vestibulum lectus mauris ultrices eros. Interdum velit euismod in pellentesque massa placerat. Fermentum leo vel orci porta. Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Duis ut diam quam nulla porttitor massa. Nisl pretium fusce id velit ut tortor pretium viverra suspendisse. Sit amet cursus sit amet dictum sit amet justo. Lectus quam id leo in vitae. Posuere urna nec tincidunt praesent semper feugiat nibh sed pulvinar. Elit eget gravida cum sociis natoque penatibus. Tortor condimentum lacinia quis vel eros donec ac. Lectus mauris ultrices eros in cursus. Elit at imperdiet dui accumsan sit amet nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Placerat vestibulum lectus mauris ultrices eros. Interdum velit euismod in pellentesque massa placerat. Fermentum leo vel orci porta. Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Duis ut diam quam nulla porttitor massa. Nisl pretium fusce id velit ut tortor pretium viverra suspendisse. Sit amet cursus sit amet dictum sit amet justo. Lectus quam id leo in vitae. Posuere urna nec tincidunt praesent semper feugiat nibh sed pulvinar. Elit eget gravida cum sociis natoque penatibus. Tortor condimentum lacinia quis vel eros donec ac. Lectus mauris ultrices eros in cursus. Elit at imperdiet dui accumsan sit amet nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Placerat vestibulum lectus mauris ultrices eros. Interdum velit euismod in pellentesque massa placerat. Fermentum leo vel orci porta. Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Duis ut diam quam nulla porttitor massa. Nisl pretium fusce id velit ut tortor pretium viverra suspendisse. Sit amet cursus sit amet dictum sit amet justo. Lectus quam id leo in vitae. Posuere urna nec tincidunt praesent semper feugiat nibh sed pulvinar. Elit eget gravida cum sociis natoque penatibus. Tortor condimentum lacinia quis vel eros donec ac. Lectus mauris ultrices eros in cursus. Elit at imperdiet dui accumsan sit amet nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Placerat vestibulum lectus mauris ultrices eros. Interdum velit euismod in pellentesque massa placerat. Fermentum leo vel orci porta. Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Duis ut diam quam nulla porttitor massa. Nisl pretium fusce id velit ut tortor pretium viverra suspendisse. Sit amet cursus sit amet dictum sit amet justo. Lectus quam id leo in vitae. Posuere urna nec tincidunt praesent semper feugiat nibh sed pulvinar. Elit eget gravida cum sociis natoque penatibus. Tortor condimentum lacinia quis vel eros donec ac. Lectus mauris ultrices eros in cursus. Elit at imperdiet dui accumsan sit amet nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Placerat vestibulum lectus mauris ultrices eros. Interdum velit euismod in pellentesque massa placerat. Fermentum leo vel orci porta. Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Duis ut diam quam nulla porttitor massa. Nisl pretium fusce id velit ut tortor pretium viverra suspendisse. Sit amet cursus sit amet dictum sit amet justo. Lectus quam id leo in vitae. Posuere urna nec tincidunt praesent semper feugiat nibh sed pulvinar. Elit eget gravida cum sociis natoque penatibus. Tortor condimentum lacinia quis vel eros donec ac. Lectus mauris ultrices eros in cursus. Elit at imperdiet dui accumsan sit amet nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Placerat vestibulum lectus mauris ultrices eros. Interdum velit euismod in pellentesque massa placerat. Fermentum leo vel orci porta. Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Duis ut diam quam nulla porttitor massa. Nisl pretium fusce id velit ut tortor pretium viverra suspendisse. Sit amet cursus sit amet dictum sit amet justo. Lectus quam id leo in vitae. Posuere urna nec tincidunt praesent semper feugiat nibh sed pulvinar. Elit eget gravida cum sociis natoque penatibus. Tortor condimentum lacinia quis vel eros donec ac. Lectus mauris ultrices eros in cursus. Elit at imperdiet dui accumsan sit amet nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Placerat vestibulum lectus mauris ultrices eros. Interdum velit euismod in pellentesque massa placerat. Fermentum leo vel orci porta. Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Duis ut diam quam nulla porttitor massa. Nisl pretium fusce id velit ut tortor pretium viverra suspendisse. Sit amet cursus sit amet dictum sit amet justo. Lectus quam id leo in vitae. Posuere urna nec tincidunt praesent semper feugiat nibh sed pulvinar. Elit eget gravida cum sociis natoque penatibus. Tortor condimentum lacinia quis vel eros donec ac. Lectus mauris ultrices eros in cursus. Elit at imperdiet dui accumsan sit amet nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Placerat vestibulum lectus mauris ultrices eros. Interdum velit euismod in pellentesque massa placerat. Fermentum leo vel orci porta. Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Duis ut diam quam nulla porttitor massa. Nisl pretium fusce id velit ut tortor pretium viverra suspendisse. Sit amet cursus sit amet dictum sit amet justo. Lectus quam id leo in vitae. Posuere urna nec tincidunt praesent semper feugiat nibh sed pulvinar. Elit eget gravida cum sociis natoque penatibus. Tortor condimentum lacinia quis vel eros donec ac. Lectus mauris ultrices eros in cursus. Elit at imperdiet dui accumsan sit amet nulla.
</p>
然后放三四个盒子。
已更改 clientY
返回offsetY
如果您尝试在 block 本身上滚动,您会发现它很平滑,但是一旦您从一个框跨过线到另一个框,值就会跳跃文本框的高度。发生这种情况的原因是因为鼠标指针是引用个人<p>
的左上角来计算的。标签。即如果你是50px
从 <p>
下来您将鼠标悬停在其上的标签的值是 offsetY
clientY
另一方面,始终具有相同的引用点 - 屏幕的左上角。因此,不存在一个盒子具有截然不同的值(value)的情况。
关于javascript - 尝试模拟滚动时使用 +/- 值调用 onpointermove,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56551447/
我的问题:非常具体。我正在尝试想出解析以下文本的最简单方法: ^^domain=domain_value^^version=version_value^^account_type=account_ty
好吧,这就是我的困境: 我正在为 Reddit 子版 block 开发常见问题解答机器人。我在 bool 逻辑方面遇到了麻烦,需要一双更有经验的眼睛(这是我在 Python 中的第一次冒险)。现在,该
它首先遍历所有 y 值,然后遍历所有 x 值。我需要 X 和 y 同时改变。 For x = 3 To lr + 1 For y = 2 To lr anyl.Cells(x, 1)
假设我有一个包含 2 列的 Excel 表格:单元格 A1 到 A10 中的日期和 B1 到 B10 中的值。 我想对五月日期的所有值求和。我有3种可能性: {=SUM((MONTH(A1:A10)=
如何转换 Z-score来自 Z-distribution (standard normal distribution, Gaussian distribution)到 p-value ?我还没有找到
我正在重写一些 Javascript 代码以在 Excel VBA 中工作。由于在这个网站上搜索,我已经设法翻译了几乎所有的 Javascript 代码!但是,有些代码我无法准确理解它在做什么。这是一
我遇到过包含日期格式的时间戳日期的情况。然后我想构建一个图表,显示“点击”项目的数量“每天”, //array declaration $array1 = array("Date" => 0); $a
我是scala的新手! 我的问题是,是否有包含成员的案例类 myItem:Option[String] 当我构造类时,我需要将字符串内容包装在: Option("some string") 要么 So
我正在用 PHP 创建一个登录系统。我需要用户使用他或她的用户名或电子邮件或电话号码登录然后使用密码。因为我知道在 Java 中我们会像 email==user^ username == user 这
我在 C++ 项目上使用 sqlite,但是当我在具有文本值的列上使用 WHERE 时出现问题 我创建了一个 sqlite 数据库: CREATE TABLE User( id INTEGER
当构造函数是显式时,它不用于隐式转换。在给定的代码片段中,构造函数被标记为 explicit。那为什么在 foo obj1(10.25); 情况下它可以工作,而在 foo obj2=10.25; 情况
我知道这是一个主观问题,所以如果需要关闭它,我深表歉意,但我觉得它经常出现,让我想知道是否普遍偏爱一种形式而不是另一种形式。 显然,最好的答案是“重构代码,这样你就不需要测试是否存在错误”,但有时没有
这两个 jQuery 选择器有什么区别? 以下是来自 w3schools.com 的定义: [attribute~=value] 选择器选择带有特定属性,其值包含特定字符串。 [attribute*=
为什么我们需要CSS [attribute|=value] Selector根本当 CSS3 [attribute*=value] Selector基本上完成相同的事情,浏览器兼容性几乎相似?是否存在
我正在解决 regx 问题。我已经有一个像这样的 regx [0-9]*([.][0-9]{2})。这是 amont 格式验证。现在,通过此验证,我想包括不应提供 0 金额。比如 10 是有效的,但
我正在研究计算机科学 A 考试的样题,但无法弄清楚为什么以下问题的正确答案是正确的。 考虑以下方法。 public static void mystery(List nums) { for (
好的,我正在编写一个 Perl 程序,它有一个我收集的值的哈希值(完全在一个完全独立的程序中)并提供给这个 Perl 脚本。这个散列是 (string,string) 的散列。 我想通过 3 种方式对
我有一个表数据如下,来自不同的表。仅当第三列具有值“债务”并且第一列(日期)具有最大值时,我才想从第四列中获取最大值。最终值基于 MAX(DATE) 而不是 MAX(PRICE)。所以用简单的语言来说
我有一个奇怪的情况,只有错误状态保存到数据库中。当“状态”应该为 true 时,我的查询仍然执行 false。 我有具有此功能的 Controller public function change_a
我有一个交易表(针对所需列进行了简化): id client_id value 1 1 200 2 2 150 3 1
我是一名优秀的程序员,十分优秀!