js 使元素显示在可视区域的中心位置

2024-09-04

js 判断一个元素是否在滚动的可视区域内，不在就固定到可视区域的上方。

前言:最近工作中,有这样一个场景,判断一个元素是否在滚动的可视区域内,不在就固定到可视区域的上方.为了以后再次遇到,所以记录下来,并分享.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9302392.html 网站地址:我的个人vue+element ui demo网站 github地址:yuleGH github (喜欢记得star哦) 话不多说,直接上 Demo 吧 <%@ page language="java" import=&qu

jq、js判断元素是否在可视区域内

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> body { height: 2000px; position: relative;} .box { position: absolute; z-index: 9; left: 0; top: 1000px; width: 100px; height: 100px; background-color: #f

如何判断元素是否在可视区域ViewPort

个性签名: 生如夏花,逝如冬雪:人生如此,何悔何怨. 前言: 经常需要计算元素的大小或者所在页面的位置,offsetWidth,clientWidth,scrollWidth,scrollTop这几个关键字的出现更是家常便饭,每次碰到都需要事先实验一番.为了下次开发提高效率.在这里一次性做个总结,以用来判断元素是否在可视区域以及用原生js简单实现懒加载.文末有个简单的懒加载实现的demo,有需要的可以看一下. 目录工欲善其事,必先利其器.在判断元素是否在可视区域实现简单的原生懒加载前,我们先简

js获取元素显示隐藏的当前状态

js获取元素显示隐藏的当前状态 // CSS var display = $("."+cls).css("display"); if(display == "none"){ 隐藏 }else{ 显示 } // JQuery if($("."+cls).is(":hidden")){ 隐藏 }else{ 显示 }

使用jQuery判断元素是否在可视区域

$("#app").offset().top; offset().top表示绝对偏移值,比如说有一个很长的页面,#app这个元素在最底下, $("#app").offset().top就表示 #app这个元素距离页面顶端的距离,它一般是固定的,不随窗口滚动而改变. $(window).scrollTop(); 窗口滚动的顶部偏移量,即此时页面的上边界到可视区域的上边界的偏移量,简单的可以理解成整个页面滚动了多少距离 $(window).height(): 浏览

javascript判断某种元素是否进入可视区域

判断是否在指定的可视区域内,先用最简单的方式,比如整个页面为可视区域找到几个关键因素: sTop= $(window).scrollTop(); //滚动条距顶部的高度 clientHeight= document.documentElement.clientHeight; //可视区域的高度 pos = = $("#pointinfo_" + markers[i].id).offset().top; //指定的元素上方距顶部的高度 pos1 = $("#poi

js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码

获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下.IE中,浏览器显示窗口大小只能以下获取: 代码如下复制代码代码如下: document.body.offsetWidth document.body.offsetHeight 在声明了DOCTYPE的浏览器中,可以用以下来获取浏览器显示窗口大小: 代码如下复制代码代码如下: document.documentElement.clientWidth document.documentElement.clientHeight

jquery中使元素显示和隐藏方法之间的区别

在实际的项目开发中,要使一个元素隐藏的方法有很多,比如css的多种属性和jquery的多种方法,虽然他们的作用都是使元素不可见,但是各个方法实现的原理是不一样的.下面主要介绍jquery各个元素隐藏方法之间的区别. 1.show()和hide() 使用hide()方法隐藏元素实际上是同时减少元素的高度.宽度以及不透明度,直到这三个属性为0,最后设置元素的css属性disolay:none.show()方法从上到下增大元素的高度,从左到右增大元素的宽度,同时增加内容的不透明度,直至元素完全显示.

原生js获取一个dom元素距离页面可视区域的位置值 -- getBoundingClientRect

getBoundingClientRect() 这个方法返回一个矩形对象,包含四个属性:left.top.right和bottom.分别表示元素各边与页面上边和左边的距离. var box=document.getElementById('box'); // 获取元素 alert(box.getBoundingClientRect().top); // 元素上边距离页面上边的距离 alert(box.getBoundingClientRect().right); // 元素右边距离页面左边的距离

JS代码片段：判断一个元素是否进入可视区域

// Determine if an element is in the visible viewport function isInViewport(element) { var rect = element.getBoundingClientRect(); var html = document.documentElement; //在IE中,默认坐标从(2,2)开始计算,导致最终距离比其他浏览器多出两个像素,我们需要做个兼容. var top = document.documentElem

Vue-懒加载(判断元素是否在可视区域内)

上公式: 元素距离顶部高度(elOffsetTop) >= dom滚动高度(docScrollTop) 并且元素距离顶部高度(elOffsetTop) < (dom滚动高度 + 视窗高度) 上代码: 一个多图表懒加载例子 <template> <div :id="boxId" style="height: 450px"> <div v-loading="chartLoading"> <de

如何判断元素是否在可视区域内--getBoundingClientRect

介绍 Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置. 根据MDN文档 getBoundingClientRect 方法返回的是一个DOMRect对象 DOMRect 对象包含了一组用于描述边框的只读属性left.top.right.bottom.x.y以及width.height,单位为像素. 属性描述 bottom Y 轴,相对于视口原点(viewport origin)矩形盒子的底部.只读. height 矩形盒子的高度(等同于 bo

移动端，input、textarea滚动至可视区域

1.一般情况下在移动端,点击input框之后,会弹出输入键盘.而内容input的内容也会自动滚动到可视区域内. 2.当父元素设置了overflow属性之后在设置了overflow属性之后,点击input框之后,input却无法滚动到可视区域内,在此情况下,我们应该怎么做呢. 3.解决方案 1.父元素不要应用overflow属性 2.手动滚动当前活动元素滚动至可视区域通过scrollIntoView或scrollIntoViewIfNeeded这两个api可使元素滚动至可视区域如下是我的解

js检测页面上一个元素是否已经滚动到了屏幕的可视区域内

应用场景:只要页面加载了,其中在页面中出现的li就向控制台输出第几个发送请求:在本次加载的页面中,再将滚动条滚回前边的li,不再向控制台输出东西,也就是说已经显示过的li,不再向控制台输出东西. <body><ul><li onclick="jumpOther()">0001</li><li>0002</li><li>0003</li><li>0004</li><

【百度地图API】如何利用自己的数据制作社交地图？只显示可视区域内的标注

原文:[百度地图API]如何利用自己的数据制作社交地图?只显示可视区域内的标注摘要:如果你自己的数据已经超过1万个,如何进行合理的显示?除了聚合marker外,还有一个办法.那就是,只显示可视区域内的标注. -------------------------------------------------------------------------------------------------------------- 成品图: 工具描述: 移动地图时(或改变地图级别时),只显示可视区域

js滚动及可视区域的相关的操作

element.getBoundingClientRect 判断指定元素相对于页面可视窗口的位置信息,通常结合windows.onScroll方法使用,当element.getBoundingClientRect.Top<=document.documentElement.clientHeight时表示该元素在可视范围内. 详细介绍 IntersectionObserver对象异步监听目标元素与其祖先或视窗的位置信息,通常用于替代element.getBoundingClientRect+wi

input聚焦时，滚动至可视区域

这里的代码来自vux,觉得vux处理得很好,在此记录一下. 当我们在手机上填表单的时候,我们会希望正在填的input或者textarea会自动滚动至可视区域,方便我们边填写边查看内容.以前我的做法是,获取元素,然后手动设置它距离顶部的高度,这种方法可行,但显得麻烦而笨重.查看了一下vux的源码,发现有一个直接的方法就可以做到这种效果,就是scrollIntoViewIfNeeded,这里分享一下它的写法. mounted () { window.addEventListener('resize'

vue input聚焦时，滚动至可视区域

这里的代码来自vux,觉得vux处理得很好,在此记录一下.当我们在手机上填表单的时候,我们会希望正在填的input或者textarea会自动滚动至可视区域,方便我们边填写边查看内容.以前我的做法是,获取元素,然后手动设置它距离顶部的高度,这种方法可行,但显得麻烦而笨重.查看了一下vux的源码,发现有一个直接的方法就可以做到这种效果,就是scrollIntoViewIfNeeded,这里分享一下它的写法. mounted () { window.addEventListener('resize',

ScrollReveal.js 用于创建和管理元素进入可视区域时的动画效果，帮助你的网站增加吸引力。

ScrollReveal.js 用于创建和管理元素进入可视区域时的动画效果,帮助你的网站增加吸引力. 1.http://www.yangqq.com/jstt/css3/2017-08-08/787.html

js获取html元素在可视区域的位置

1)html节点在可视区域的位置 obj.getBoundingClientRect().top obj.getBoundingClientRect().left 2) 获取鼠标按下的位置 event.clientX event.clientY 3) html节点在父元素里的位置 obj.offsetTop obj.offsetLeft obj.offsetHeight 元素的高度 obj.offsetWidth 元素的宽度

js 使元素显示在可视区域的中心位置

热门专题