V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
Richard14
V2EX  ›  问与答

前端如何实现,用户看到某元素的时候,触发事件?

  •  
  •   Richard14 · 2022-05-09 18:16:11 +08:00 · 1194 次点击
    这是一个创建于 690 天前的主题,其中的信息可能已经有所发展或是发生改变。

    比较常见的几个需求,

    第一个是官网介绍页面,希望用户往下拉的同时,第一次看到某元素时触发一个出现动画。

    第二个是例如 v2 这种论坛,希望随着用户往下拉页面,聚焦的评论楼层不同,网址自动变成#某某楼,这样用户跨位置分享也比较方便。

    这种需求如何实现呢?似乎只能通过 js 触发,因为元素的具体显示位置在不同平台上不同,没法预设定一个拉到多高多高就触发多少事件的脚本。。。

    有什么能配合 vue 使用的方案吗?

    8 条回复    2022-05-10 21:06:58 +08:00
    Rache1
        1
    Rache1  
       2022-05-09 18:18:58 +08:00
    IntersectionObserver
    SilencerL
        2
    SilencerL  
       2022-05-09 18:52:58 +08:00 via iPhone
    ele.getBoundingClientRect().top
    renmu
        3
    renmu  
       2022-05-09 19:05:18 +08:00 via Android
    有相应需求的库,但是我想不起来叫啥了
    bmwh123
        4
    bmwh123  
       2022-05-09 19:30:47 +08:00
    react 的 https://www.react-reveal.com/examples/
    vue 的 应该也有吧, 找到一个 js 版本的 https://scrollrevealjs.org/
    christin
        6
    christin  
       2022-05-10 09:57:24 +08:00 via iPhone
    用高度来做
    CodeCodeStudy
        7
    CodeCodeStudy  
       2022-05-10 15:31:19 +08:00   ❤️ 1
    楼上的不够精确啊,楼主说的是“看到某元素”,当元素显示在页面上的时候,用户并不一定能够看得到,想要知道用户看得到,那需要调用摄像头,抓取用户的瞳孔画面,通过分析瞳孔画面得到用户看到影像,位于中间的才算是用户看到该元素。
    Richard14
        8
    Richard14  
    OP
       2022-05-10 21:06:58 +08:00   ❤️ 1
    @CodeCodeStudy 你这机灵抖得很无聊
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2898 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 11:15 · PVG 19:15 · LAX 04:15 · JFK 07:15
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.