Observer.create

Observer.create( vars:Object ) : Observer

根据提供的配置详细信息创建一个新的 Observer 实例。

参数

vars: 对象
包含你想要的任何设置和回调函数的配置对象，例如：type, onChange, onUp, onDown, debounce，等等。

细节

根据提供的配置信息创建一个新的 Observer 实例（所有参数都是可选的）。例如：

Observer.create({
  target: window, // can be any element (selector text is fine)
  type: "wheel,touch", // comma-delimited list of what to listen for ("wheel,touch,scroll,pointer")
  onUp: () => previous(),
  onDown: () => next(),
});

演示

注意下面的演示中实际上没有滚动，但您可以使用鼠标滚轮（或者在触摸设备上滑动）来启动移动，使其“感觉”像在滚动：

加载中...

配置属性

传递给Observer.create()的配置对象可以包含以下任意可选属性：

属性	描述
axis	字符串 - when`lockAxis: true`被设置时，每次按压后的首次拖拽动作（类型为 "pointer" 和/或 "touch"）将根据用户移动的方向设置`axis`属性为 "x" 或 "y"。你可以使用`onLockAxis()`回调来知道何时被设置。
capture	布尔值 - 如果为 true`true`，它将使 touch/pointer 相关的监听器使用捕获阶段。就像执行了`addEventListener("\[type\]", func, {capture: true})`;
debounce	布尔值 - 默认情况下，Observer 会节流事件，以便在每次 requestAnimationFrame() 执行期间累加 delta 值以最大化性能，但你可以通过此选项禁用该行为：`debounce: false`来禁用该项功能。在这种情况下，它会在每个事件上立即检查。防抖会影响除`onPress`, `onRelease`, `onHover`, `onHoverEnd`, `onClick`, `onDragStart`，以及`onDragEnd`之外的所有回调，因为这些回调与 delta 无关。
dragMinimum	数字 - 被视为“拖动”的最小距离（以像素为单位）。这可以防止特别是在触摸设备上发生的小幅移动被误认为是操作意图。例如，在手机上用手指按下时可能会注册到几像素的轻微移动，即使用户认为自己的手指是静止的。dragMinimum 只适用于按下后最初的移动，之后继续拖动将只受 "tolerance" 的限制。
id	字符串 - 一个任意的字符串 ID，可以用于通过Observer.getById().
ignore	元素 \| 字符串 \| 数组 - 你希望 observer 监听的元素忽略的元素，当这些元素触发了一个 scroll/touch/pointer/mouse 事件时，整个事件将被完全忽略。它会检查事件的目标来决定是否忽略。你可以将`event.target`定义为一个 Element 引用、类似`ignore`的选择器文本，或者一个元素数组（数量不限）。`".ignore-me"`, or an Array of elements (it can be as many as you'd like).
lockAxis	布尔值 - 如果为 true`true`，Observer 将会在每次按压后首次拖拽移动时（类型为 "pointer" 和/或 "touch"）检测方向，并锁定到该方向直到用户释放指针/触摸。因此，如果首次拖拽是水平方向，则只会有像`onChangeX()`这样与水平相关的回调被触发直到指针/触摸释放。甚至还有一个`onLockAxis()`回调供你绑定。
onChange	函数 - 当目标上发生移动时调用的函数。任一y轴（垂直方向）或者x轴（水平方向）检测到移动时调用的函数。只要移动持续就会不断调用该函数（受任何 tolerance 阈值限制）。
onChangeX	函数 - 当在 x 轴（水平方向）上有移动时调用的函数。只要移动持续进行，就会一直调用该函数（受任何 tolerance 阈值的限制）。
onChangeY	函数 - 当在 y 轴（垂直方向）上有移动时调用的函数。只要移动持续进行，就会一直调用该函数（受任何 tolerance 阈值的限制）。
onClick	函数 - 当目标被点击时调用的函数。
onDown	函数 - 检测到向下移动时调用的函数，意味着 delta 值增加（比如用手指/鼠标向下拖动...这会导致`y`坐标增加）。如果你想仅反转鼠标滚轮的 delta，你可以设置`wheelSpeed: -1`因为它是一个乘数。
onDragStart	函数 - 当用户按住目标并开始拖动时调用的函数（受`dragMinimum`限制）。这只适用于 "touch" 和/或 "pointer" 类型。
onDrag	函数 - 当用户移动指针/触摸/鼠标时调用的函数。在按下时在目标元素上（仅适用于"touch"和/或"pointer"类型）。
onDragEnd	函数 - 当用户在目标元素上停止拖动时调用的函数（仅适用于 "touch" 和/或 "pointer" 类型）。
onLeft	函数 - 检测到向左方向移动时调用的函数。
onLockAxis	函数 - 当轴被锁定时调用的函数（需要`lockAxis: true`）。可以通过观察器的`axis`属性（"x"或"y"）检查是哪个轴。
onHover	函数 - 当指针/鼠标悬停在目标上方时调用的函数（"pointerenter"/"mouseenter" 事件）。
onHoverEnd	函数 - 当指针/鼠标移出目标时调用的函数（"pointerleave"/"mouseleave" 事件）。
onMove	函数 - 当用户在悬停在目标元素上时移动指针/鼠标时调用的函数（仅适用于 "pointer" 类型）。它在内部监听 "pointermove"/"mousemove" 事件。使用`onDrag`如果您想让它仅在按压和拖动时触发。需要注意的是，当您定义onMove时，它会导致观察者在悬停期间测量delta值悬停期间在目标上方，从而触发适当的与移动相关的回调函数，如onUp、onDown、onChange等，以响应在目标上方的任何指针/鼠标移动。通常情况下，与移动相关的回调函数只有在用户按下并拖动时才会被触发.
onPress	函数 - 当用户在目标元素上按下时调用的函数（仅适用于 "touch" 和/或 "pointer" 类型）。
onRelease	函数 - 当触摸/指针释放后调用的函数。`onPress`后释放触摸/指针时调用的函数（仅适用于"touch"和/或"pointer"类型）。
onRight	函数 - 检测到向右方向移动时调用的函数。
onStop	函数 - 当变化结束至少 0.25 秒后调用的函数（可通过`onStopDelay`)
onStopDelay	数字 - 在触发 onDelayEnd 回调之前等待的时间（秒数）。`onStop`的时间（默认：0.25秒）。
onToggleX	函数 - 当检测到运动时调用的函数。切换方向时调用的函数在x轴上（水平方向）。
onToggleY	函数 - 当检测到运动时调用的函数。切换方向时调用的函数在y轴上（垂直方向）。
onUp	函数 - 检测到向上移动时调用的函数，意味着 delta 值减少（比如用手指/鼠标向上拖动...这会导致`y`坐标减少）。如果您只想反转鼠标滚轮delta值，可以设置`wheelSpeed: -1`因为它是一个乘数。
onWheel	函数 - 当使用鼠标滚轮时调用的函数。
scrollSpeed	数字 - 滚动 delta 值的乘数。这只适用于 type`"scroll"`类型，意思是当目标分派一个不同于滚轮事件的滚动事件时。您可以设置`scrollSpeed: -1`来反转delta值，并使其调用`onUp`而不是`onDown`（反之亦然）。`scrollSpeed: 0.5`将使delta值变为一半通常情况下的数值。注意：还有一个单独的`wheelSpeed`选项，仅适用于滚轮事件。
目标对象	元素 \| 字符串 - 应为其监听事件的元素。默认情况下，它是主视口。
tolerance	数字 - 触发其中一个回调（如`onUp`, `onDown`, `onChangeY`等）所需的最小距离（以像素为单位）。例如，如果容差是10但用户只移动了8个像素，则不会触发回调。一旦距离超过容差量，就会触发回调并重置，再次等待该距离被超过之后才会再次触发回调。
type	字符串 - 你要监听的动作类型的逗号分隔列表，可以包含以下任意一项（或全部）：`"wheel,touch,scroll,pointer"`。 "touch"适用于任何触控设备，无论浏览器如何（iOS/Android可能在底层使用TouchEvent，而微软可能使用PointerEvent，但Observer将它们都包括在"touch"中）。 "pointer"涵盖所有非触控的指针/鼠标按下/拖动/滑动动作。"wheel"用于鼠标滚轮移动，"scroll"用于滚动事件。默认是 `"wheel,touch,pointer"`
wheelSpeed	数字 - 轮播 delta 值的乘数。默认情况下，它只是传递浏览器报告的轮播事件的 delta，但可能看起来比用指针按压/拖动时更快/更慢，你需要一种方法使其更相似。例如，如果你想让轮播 delta 值为正常的一半，你可以这样做`wheelSpeed: 0.5`。您可以设置`wheelSpeed: -1`来反转delta值，并使其调用`onUp`而不是`onDown`（反之亦然）。注意：还有一个单独的`scrollSpeed`选项，仅适用于滚动事件。

回调数据

每个回调都会接收到观察者实例本身作为唯一的参数，以便您可以轻松访问诸如self.velocityX, self.velocityY, self.deltaX, self.deltaY, self.x, self.y等数据（请参阅左侧边栏了解所有可用属性的列表），例如：

Observer.create({
  ...
  onChange: (self) =>  {
    console.log("velocity:", self.velocityX, self.velocityY, "delta:", self.deltaX, self.deltaY, "target element:", self.target, "last event:", self.event);
  }
});

通知

消息

Observer.create

Observer.create( vars:Object ) : Observer

参数

vars: 对象

细节

演示

加载中...

配置属性

回调数据

目录

Observer.create

Observer.create( vars:Object ) : Observer

参数

vars: 对象

细节​

演示​

加载中...

配置属性​

回调数据​

目录

细节

演示

配置属性

回调数据