首页 > 其他分享 >鼠标滚动判断dom元素是否在可视区

鼠标滚动判断dom元素是否在可视区

时间:2024-07-30 11:43:06浏览次数:10  
标签:style target dom 元素 item 可视区 entry Math 鼠标

1、利用IntersectionObserver监听dom元素

<div class="box_over">
      <ul>
        <li v-for="(item,index) in 10" :style="`background:rgb(${255 * Math.random() * 2},${255 * Math.random() * 2},${255*Math.random() * 4})`">{{index}}</li>
      </ul>
    </div>
let observer = new IntersectionObserver((entries, observer) => {  
        entries.forEach(entry => {  
           // 当元素进入视口时  
          if (entry.isIntersecting) {  
            console.log("元素进入",entry.target.textContent)
            entry.target.style.transform = "translateX(0px)";  
            entry.target.style.opacity = 1;
          } else {  
             // 当元素离开视口时 
            let i = Math.floor(Math.random() * 2);
            console.log(i)
            console.log("元素消失",entry.target.textContent)
            entry.target.style.transform = `translateX(${i?100:-100}px)`;  
            entry.target.style.opacity = 0;
            
          }  
        });  
      }, {  
        rootMargin: '0px',  
        threshold: 0.1 // 你可以调整这个值来控制元素与视口的交叉程度  
      });  
      document.querySelectorAll("li").forEach((item) => {
        observer.observe(item);
      });

image

2、传统方式监听滚动条


      let list = document.querySelectorAll("li");

      document.querySelector(".box_over").onscroll = function (event){//记得给盒子box_over添加position:relative;样式,因为offsetTop是计算距离顶部父元素已定位的距离
          list.forEach((item,index)=>{//对每个li标签都做了判断所以用了forEach循环
            if(item.offsetTop - event.target.scrollTop < event.target.clientHeight && item.offsetTop + item.clientHeight > event.target.scrollTop){
              console.log("元素进入",item.textContent)
              item.style.transform = "translateY(0px)";  
              item.style.opacity = 1;
            }else{
              let i = Math.floor(Math.random() * 2);
              item.style.transform = `translateY(${ 200}px)`;  
              item.style.opacity = 0;
            }
          })
      }

image

标签:style,target,dom,元素,item,可视区,entry,Math,鼠标
From: https://www.cnblogs.com/jzm2842688813/p/18331962

相关文章

  • Dom-API | MutationObserver使用方法详解
    MutationObserver介绍MutationObserver是是一个用于监视DOM变动的WebAPI。通过它可以监控DOM树中的更改,比如元素的属性、子元素的增加和删除等,并在这些变化发生时执行回调函数。可以替代过时的MutationEvents,它具有更高的性能和更广的适用性。使用步骤详细说明1.创......
  • Python - Using a list with functions from the random module
    Toselectarandomitemfromthelistorshufflethelist,youcanusethechoiceandshufflefunctionsfromtherandommoduleofthestandardlibrary.Therandom.choice()functionreturnsarandomlyselectedelementfromthelist.>>>importran......
  • 论文阅读:Borrowing wisdom from world: modeling rich external knowledge for Chines
    问题定义由于词级中文NER存在第三方解析器分割的边界错误,因此考虑将字符级NER作为默认设置。使用'BMES'标记方案进行字符级NER,将标记表述为序列标记问题。即,对于句子\(s={c_1,...,c_n}\)中的每个字符\(c_i\),使用标签集中的标签进行标记\(L={B,M,E,S,O}\)。O:非实体元素B:实......
  • js vue3 vue2鼠标单击事件复制指定内容到粘贴板
    借助原生JavaScript的 navigator.clipboard.writeText() 方法来时(要求页面是在用户交互的上下文中,比如点击事件处理程序中调用)如:点击列表的复制按钮,得到指定列(data)的值到粘贴板<template><div><button@click="click">复制文本</button></div></templ......
  • vb6.0版本鼠标点击移动操作程序代码
    'sleep函数PrivateDeclareSubSleepLib“kernel32”(ByValdwMillisecondsAsLong)'获取鼠标坐标PrivateTypePOINTAPIXAsLongYAsLongEndTypePrivateDeclareFunctionGetCursorPosLib“user32”(lpPointAsPOINTAPI)AsLong'移动鼠标PrivateDe......
  • DDD(Domain-Driven Design)领域驱动设计
    在软件开发中,DDD(Domain-DrivenDesign,领域驱动设计)是一种方法论,它强调在开发过程中将业务领域的知识和规则作为核心。DDD的目标是通过理解和建模业务领域来创建更好的软件系统。本文将详细讲解DDD的基本概念、原则和实践方法。什么是DDD?DDD是一种软件设计方法,它专注于理解......
  • 即使鼠标位于左侧画布上,右侧画布也会滚动
    我一直在尝试制作一个程序,根据窗口的宽度有3种布局(使用Tkinter)。问题在于中等布局。每当我将鼠标放在左侧画布上并使用MouseWheel时,右侧画布就会滚动,而左侧画布应该滚动。当我的鼠标放在右侧画布上并使用鼠标滚轮时,右侧画布会滚动。我找不到任何解决方案。importtkin......
  • R语言随机森林RandomForest、逻辑回归Logisitc预测心脏病数据和可视化分析|附代码数据
    全文链接:http://tecdat.cn/?p=22596最近我们被客户要求撰写关于预测心脏病的研究报告,包括一些图形和统计输出。本报告是对心脏研究的机器学习/数据科学调查分析。更具体地说,我们的目标是在心脏研究的数据集上建立一些预测模型,并建立探索性和建模方法。但什么是心脏研究?研究大纲......
  • 使用 YOLOv5 和 PyWin32 的游戏中鼠标移动和点击无法正常工作
    我正在开发一个AI项目,使用YOLOv5模型来检测和射击Aimlabs游戏中的物体。该代码在游戏暂停时工作正常,但在游戏运行时无法准确移动鼠标,您知道如何解决此问题吗?importcv2importtorchimportnumpyasnpimportmssfromPILimportImageimportwin32apiimportwin32c......
  • 使用 python 检测鼠标是等待还是忙碌
    我正在用Python2.7创建一个脚本。该脚本在应用程序内自动执行鼠标单击。有一些情况,在单击鼠标后,鼠标光标将“等待”,我想等到鼠标光标恢复正常后再进行操作我进入代码中的下一步。Python中是否可以检测鼠标是否正在等待?在Python中没有内置方法可以检测......