在滚动滚动固定元件上滚动时如何检测滚动事件

发布于 2025-02-09 08:17:53 字数 913 浏览 2 评论 0原文

我的项目建立在 nuxt.js 的情况下， vue coptosion api

因此，我的滚动事件没有启动，因为我的容器具有溢出：hidden。即使隐藏了溢出，我有什么办法可以使滚动事件发生射击？

HTML

<template>
  <div id="test">
    <full-page ref="fullpage" :options="options" id="fullpage">
      <div class="title">Title</div>
      <div class="details">Details</div>
      <form>
        <input type="text" placeholder="Name" name="your-name"/>
      </form>
    </full-page>
  </div>
</template>

JS的

function handleScroll(e: any) {
  console.log('scrolled')
}
onMounted(() => {
  const t = = document.getElementById('test')
  t!.addEventListener('scroll', handleScroll)
}

目标是只有在我滚动此#test div，而将其余的元素固定为固定，则只有在我滚动的#test div中才能显示一些动画。但是目前，我正在输出控制台日志以检查是否有效。

原文

My project is built on nuxt.js with vue composition api

So, my scroll event is not firing because my container has overflow:hidden. Is there any way that I can have the scroll event fire up even when overflow is hidden?

HTML

<template>
  <div id="test">
    <full-page ref="fullpage" :options="options" id="fullpage">
      <div class="title">Title</div>
      <div class="details">Details</div>
      <form>
        <input type="text" placeholder="Name" name="your-name"/>
      </form>
    </full-page>
  </div>
</template>

function handleScroll(e: any) {
  console.log('scrolled')
}
onMounted(() => {
  const t = = document.getElementById('test')
  t!.addEventListener('scroll', handleScroll)
}

The objective is to have the form to only show up with some animation whenever I scroll in this #test div, while having the rest of the elements fixed.
But for now I'm outputting a console log just to check if it works.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

无敌元气妹 2025-02-16 08:17:53

通过使用溢出：隐藏丢失滚动能力，因此无法实现，因此无法实现这一点，因此无法实现。

要捕获溢出元素上的滚动事件，您必须通过将事件侦听器添加到Wheel（鼠标）中来重新创建滚动事件。请注意，浏览器支持可能不一致。
另请注意，这不会说明上/下键盘键滚动，或touchMove滚动（您还需要添加侦听器）。

对于基本的鼠标事件，您可以使用：

t!.addEventListener('wheel', handleScroll);

这应该有效，请确保检查浏览器支持和可访问性。并将侦听器添加到touchMove事件中，并在需要时向上/下键。
您可以在此处查看箭头键代码和适当的事件侦听器：
https://www.geeksforgeeks.org/javascript-detect-detectect-detecting-the-the-proct--javascript-detecting-the-the-com- -pressed-arrow-key/

This is somewhat complicated to achieve as you request, by using the overflow: hidden the scroll ability is lost and thus not possible as-is.

To capture the scroll event on an overflow hidden element, you'll have to re-create the scroll event yourself by adding an event listener to the wheel (mouse) instead. Note that browser support may be inconsistent.
Also note that this won't account for up/down keyboard key scrolling, or touchmove scrolling (which you would need to add a listener to as well).

For just the basic mousewheel event, you can use:

t!.addEventListener('wheel', handleScroll);

This should work, make sure to check for browser support and accessibility. And to add the listener to the touchmove event and up/down keys if needed.
You can review the arrow keys codes and proper event listener here:
https://www.geeksforgeeks.org/javascript-detecting-the-pressed-arrow-key/

回复收藏 0 原文

~没有更多了~