javascript实现div跟随滚动条移动

hong 2011-03-03

        实现过程中遇到的主要问题有两点 

        首先要解决的是在不同浏览器下获取ScrollTop值的问题，采取的方法是：

         var scrollTop = window.pageYOffset  || document.documentElement.scrollTop || document.body.scrollTop||0;

             需要注意的是在HTML文件首部要包含DTD声明：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

         接着是window.setInterval();函数体要放在setInterval中，否则firefox及chrome浏览器下执行会有问题；

         最终的代码为：

        

window.setInterval(function moveWithScroll()
   {
	  var scrollDiv=document.getElementById('scrollDiv');
	  var w=document.documentElement.clientWidth;
	  var h=document.documentElement.clientHeight;
	  var ow=scrollDiv.style.width;
	  var oh=scrollDiv.style.height;
	  var scrollTop = window.pageYOffset  || document.documentElement.scrollTop || document.body.scrollTop||0;
	  var nowW=(w-parseInt(ow))/2;
	  var nowH=(scrollTop+h-parseInt(oh))-400/2;
	  scrollDiv.style.left=nowW+"px";
	  scrollDiv.style.top=nowH+"px";	  
   },50);

scrollDiv为要滚动的div的ID

hong

hong

相关推荐

Python selenium 滚动条

在我们使用Python + selenium 的时候，会遇到如下报错，原因是当页面上的元素超过一屏后，想操作屏幕下方的元素，是不能直接定位到，会报元素不可见的。这时候需要借助滚动条来拖动屏幕，使被操作的元素显示在当前的屏幕上。selenium里面也没有直接

letheashura / 0评论 2020-05-10

微信小程序点击滚动到指定位置

公司项目要做一个类似微信通讯录导航的效果，点击右侧字母页面滚动到相应位置。因为微信小程序没有dom概念，所以不能使用锚点，也不能直接获取对应字母相对页面的偏移位置。此时只能使用小程序创建对象实例的API获取节点信息：

hgzhang / 0评论 2019-12-05

加载更多数据 infinite ajax scroll 分页

2.更多数据的页面代码：

lpch0 / 0评论 2014-01-16

JS干货｜ 浏览器缺陷、浏览器的缺陷修复等五大开发问题解决之道

任意一段重要的代码都需要关注无数的开发问题。但是，其中对可复用JavaScript代码挑战最大的五项问题如图14.2所示。浏览器的缺陷修复。复杂的地方是，当前浏览器bug会在未来的浏览器版本中被修复。规避这类问题将会造成灾难性后果。警惕这些API未来可能发

JavaJspSsh / 0评论 2019-11-18

vue里面监听滚动事件以及获取scrollTop

<template>. <div><button></button></div>. </template>. <script>. export default {. nam

骷髅狗 / 0评论 2019-11-04

jQuery中的CSS（五）

jQuery 1.8中，当你使用CSS属性在css()或animate()中，我们将根据浏览器自动加上前缀，比如; 在Chrome/Safari浏览器中我们将设置为"-webkit-user-select", Firefox会使用&qu

zengni / 0评论 2019-11-02

jquery判断页面滚动条(scroll)是上滚还是下滚，且是否滚动到头部或者底部

webtouch页面，防苹果手机safari浏览器，网上滑动，底部导航消失，滑动到底部又出现。向下滑动，底部导航出现。因此只能判断滚动条是上滚下滚等。关于手机手势，后面的文章会介绍，欢迎关注！

dly / 0评论 2015-05-29

React SPA 应用 hash 路由如何使用锚点

当我们在做 SPA 应用的时候，为了兼容老的浏览器我们不得不放弃 HTML5 browser history api 而只能采用 hash 路由的这种形式来实现前端路由，但是因为 hash 被路由占据了，导致本来不是问题的锚点功能却成了一个不大不小的问题。

jluzh00 / 0评论 2019-09-08

el-select数据过多懒加载的解决(loadmore)

在日常项目中el-select组件的使用频率是非常之高的. 当数据过多时渲染时间非常长, 这里提供几个处理方式.组件提供了远程搜索方式, 也就是按照你输入的结果匹配选项.下拉懒加载, 当select滚动到底部时, 你再去请求一部分数据, 加入到当前数据中.

hanfox / 0评论 2019-05-29

jQuery判断滚动到底部或顶部

$.scrollTop()和$.scrollTop()具有相同的效果，都为返回滚动条的垂直位置,但是$.scrollTop()被所有浏览器支持。所以建议以后用$.scrollTop()来获取滚动距离。但是出滑屏智能机后，手机页面有一个橡皮筋效果，所以滑动到

dengjianbin / 0评论 2018-08-24

php+ajax实现商品对比功能示例

本文实例讲述了php+ajax实现商品对比功能。分享给大家供大家参考，具体如下：。$.val($(".compare-box li").map(function(){//将对比的所有商品ID，赋值给#comids

luckylqh / 0评论 2019-04-13

vue+vux scrollTop 实现定位到具体dom

先看一下最终的运行效果。虽然我的复制能力MAX，但最起码的功能点还是要先梳理一下。要实现这个功能统共分两步，第一根据点击找到需要定位的位置，第二触发页面滚动直接到这个位置。so easy 嘛~我以迅雷不接掩耳盗小铃铛之势就从我的程序小仓库里Ctrl+C了一

gjcxywwx / 0评论 2019-07-01

【学习笔记】CSS深入理解之overflow

《张鑫旭的CSS深入理解之overflow》学习笔记overflow基本属性overflow属性介绍overflow: visible(默认)|hidden|scroll|auto|inherit. 当overflow-x 与 overflow-y值不相同

ajhongshaorou / 0评论 2019-06-29

jquery scrollTop到达指定位置！

下面的代码表示滚动条跳到500的位置，页面移动速度是800。

CodeTerminator / 0评论 2018-10-17

jQuery判断滚动到底部或顶部

$.scrollTop()和$.scrollTop()具有相同的效果，都为返回滚动条的垂直位置,但是$.scrollTop()被所有浏览器支持。所以建议以后用$.scrollTop()来获取滚动距离。但是出滑屏智能机后，手机页面有一个橡皮筋效果，所以滑动到

81497307 / 0评论 2018-08-24

html中offsetTop、clientTop、scrollTop、offsetTop各属性介绍

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度。obj.offsetTop 指 obj 间隔上方或上层控件的地位，整型，单位像素。obj.off

Burgdan / 0评论 2017-03-19

HTML元素坐标定位，这些知识点得掌握

视口坐标是相对于窗口的坐标，而文档坐标是相对于整个文档而言。例如，在文档坐标中如果一个元素的相对于文档的Y坐标是200px，并且用户已经把浏览器向下滚动了75px，那么视口坐标中元素的Y坐标为200px–75px=125px。Window对象的pageXO

CoreyJia / 0评论 2017-03-14

jQuery插件实现网页底部自动加载-类似新浪微博

要实现滚动条滚到底部自动加载后续内容到内容到底部的功能，用jQuery非常方便的，只要知道什么时候滚动到了底部就好办了。Js代码 $.scrollTop()//获取垂直滚动条到顶部的距离$.height()//整个网页的高度$.height()//浏览器窗

JessieJWang / 0评论 2019-06-28

jQuery插件实现网页底部自动加载-类似新浪微博

要实现滚动条滚到底部自动加载后续内容到内容到底部的功能，用jQuery非常方便的，只要知道什么时候滚动到了底部就好办了。Js代码 $.scrollTop()//获取垂直滚动条到顶部的距离$.height()//整个网页的高度$.height()//浏览器窗

84483065 / 0评论 2016-03-08

动画历程之滚动的坑

很多时候我们在web上做动画一般都是选择滚动事件来触发。因为动画需要判断是否处于视口内，或者是否到达某个临界点。而滚动在不同的浏览器中，不同操作系统中的实现都有不同。这些就是我们需要注意的坑~chrome 移动端滑动模拟，速度是比较慢速的滑动。ios UI

zaocha / 0评论 2019-06-27

jquery判断页面滚动条(scroll)是上滚还是下滚，且是否滚动到头部或者底部

webtouch页面，防苹果手机safari浏览器，网上滑动，底部导航消失，滑动到底部又出现。向下滑动，底部导航出现。遇到问题1、我一开始用swipeup和swipedown来做，发现因为有滚动条，不会触发。因此只能判断滚动条是上滚下滚等。关于手机手势，后

EdwardSiCong / 0评论 2015-05-30

jQuery弹出Div窗口居中显示、滚动跟随、关闭按钮以及几秒后自动消失

var screenWidth = $.width(), screenHeight = $.height(); //当前浏览器窗口的 宽高。var scrolltop = $.scrollTop();//获取当前窗口距离页面顶部高度

asdjkl / 0评论 2015-04-30

jquery方法之scrollTop()

返回或设置匹配元素的滚动条的垂直位置，对于可见元素和不可见元素均有效。offset可选参数，规定相对滚动条顶部的偏移，以像素计。*当用于设置值时，该方法设置所有匹配元素的scrolltopoffset。

XiaoSpring / 0评论 2015-01-15

抽取jquery源码实现获取元素的精确位置

pageXOffset：firefox 滚动条顶部到网页左边的距离var getCoords = function{

WSGPFMMY / 0评论 2014-10-18

DOM元素在浏览器中的位置参数，如offset,ownerDocument

区分clientX和screenX的简单办法是？client指浏览器左上角；screen指显示器左上角。所以正常情况下screen>=client。documentElement属性可返回文档的根节点。offsetTop改元素最上端离它父元素最上端的

aaaaaaaa00 / 0评论 2014-10-08

一个简单的返回顶部jQuery代码

本文演示jQuery返回顶部，当文章页比较长时间，可以方便用户返回网站的顶部，实现代码也不难，大家学习下！</script>其中scrollSilde.js代码为：可以500%提高开发效率的前端UI框架！

KLong / 0评论 2014-09-09

JQuery技巧2

vartargetOffset=$(this).offset().top;returnthis;$("body").scrollTo(500);returnfalse;});$('#XY').html("X:"+e.

Haoroid / 0评论 2014-05-21

UEditor图片焦点错位,火狐document.body.scrollTop不管用的问题

在火狐浏览器中不管用的问题。但是，我在本地的环境试了一下。所以以上问题如果同样出现在UEditor的时候，请到源码里面把

srdwxA / 0评论 2014-05-20

加载更多数据 infinite ajax scroll 分页

2.更多数据的页面代码：

daydream000 / 0评论 2014-01-16

最简单的用jquery实现动画的跳到顶部和底部

//当点击顶部按钮的时候，执行方法,scrollTop属性获取选中标签距滚动条的距离。//当点击底部标签时候，执行方法，其中offset()获取匹配元素在当前视口的相对偏移,返回的是一个对象，有两个属性top,left

崔博伦一路有你 / 0评论 2013-07-18

上下跑马灯效果 按钮控制暂停 上下滚动

setTimeout;//5秒后执行yourFunction(),只执行一次

rou / 0评论 2013-05-29

解决弹出层水平垂直居中 兼容问题

important;/*FF IE7 该值为本身高的一半*/margin-top:0px;position:fixed!documentElement.scrollTop + /2 :/*IE6*/ document.body.scrollTop + /2

努力的zhiyi / 0评论 2013-05-16

vue-router 导航钩子

vue-router 提供的导航钩子主要用来拦截导航，让它完成跳转或取消。执行效果依赖 next 方法的调用参数。如果全部钩子执行完了，则导航的状态就是 confirmed （确认的）。如果浏览器的 URL 改变了，那么 URL 地址会重置到 from 路

89701933 / 0评论 2019-06-21

jquery 弹出框 当前页面 居中（有滚动条）

有了这个，可以计算出来垂直居中的坐标。但是滑动了滚动条怎么依然垂直居中呢？$是获取整个网页的，$是获取当前窗体的，这个要搞清楚。最后把获取的坐标赋给窗体即可，窗体本身是绝对定位的，所以自然可以到窗体中间。var objTop = /2 + scrollto

xuewenke / 0评论 2013-01-24

使用jquery写一个热键(J/K)动态滚动浏览插件

加班之余很无聊，几分钟足够写个彩蛋夹在里面自娱自乐。。。实现的效果很简单，用j/k键自动翻滚上一条/下一条动态信息，和twitter、微博、g+等等一样，乃懒人IB利器。主要解决的问题就是判断当前显示在第几条之上，如此获得动态列表中一条的索引位置，从而得到

zfjdoreen / 0评论 2012-11-06

jquery控制右侧滚动条

$.animate;稍微说明一下这个效果：

钱多多 / 0评论 2012-08-30

Jquery实现返回顶部的功能

<!<!--. $(".goto").hide();$("body").scrollTo("fast");returnfalse;});vartargetOffset=$(this).

Allenyhy / 0评论 2012-06-04

Div+CSS实现始终居中的半透明弹出层

important;/*FFIE7该值为本身高的一半*/

别告诉我有Bug / 0评论 2011-10-10

关于Chrome（谷歌浏览器）对document.documentElement.scrollTop==0

题是Chrome可能把文档当作非标准文档来解析了）。IE、Firefox、Chrome下都能显示正常了。

HealerJJJ / 0评论 2011-09-23

兼容主流浏览器的背景遮盖和居中浮动层的CSS样式

important; /*FF IE7 该值为本身宽的一半 */

zhangpeng / 0评论 2011-09-07

javascript 学习笔记

用这个方法帮助探测浏览器

蚊子的逗比世界 / 0评论 2011-06-28

如何正确使用jQuery代码

（忽见，锅碗瓢盆夹杂一堆不明物飞来……关注小博的童鞋朋友都知道，最近俺在疯狂得折腾jQuery，而且成果显著发文多多，也有用俺发出来的代码加到小站上的。独乐乐不如众乐乐，俺一人折腾不如一票人一起折腾。不过问题也随之出现了，有些小朋友不懂jQuery来着，而

83453065 / 0评论 2011-03-30

python中selenium 滚动条下拉 操作

在本例中的页面中，密码是输入框，正常手工操作时，可以通过tab键会切换到密码框中，所以根据此思路，在python中也可以发送tab键来切换，使元素显示。这个据说对IE和firefox都奏效，但是对chrome不行！

Reiki / 0评论 2017-02-22

React操作真实DOM实现动态吸底部的示例

这个是需要计算页面滚动距离的，如果使用Jquery或者原生js实现是非常好实现的，但是由于使用react并不推崇操作DOM，但是如果使用virtual DOM的话是无法实现该效果的，所以还是要引入js去直接获取DOM进行操作。react在component

fengdongkun / 0评论 2017-10-23

JS简单实现滑动加载数据的方法示例

梦秋雨 / 0评论 2017-10-18

JS简单判断滚动条的滚动方向实现方法

本文实例讲述了JS简单判断滚动条的滚动方向实现方法。分享给大家供大家参考，具体如下：。}更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScri

SunCherryDream / 0评论 2017-04-28

js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法

相信很多人都见过瀑布流图片布局，那些图片是动态加载出来的，效果很好，对服务器的压力相对来说也小了很多。　　　　　　//var page = Number + 1;判断滚动条到底部，需要用到DOM的三个属性值，即scrollTop、clientHeight、

woniuguanjun / 0评论 2019-05-09

工作中常用的js、jquery自定义扩展函数代码片段汇总

仅记录一些我工作中常用的自定义js函数。/* 在textarea处插入文本--Ending */调用方式：这里使用了easyui中的combobox控件和ueditor富文本控件

87374459 / 0评论 2019-05-09

js中scrollTop()方法和scroll()方法用法示例

本文实例讲述了js中scrollTop()方法和scroll()方法用法。分享给大家供大家参考，具体如下：。$.scrollTop; //把 scroll top offset 设置为 100px获得滚动条的高度：。$.scroll监听滚动事件，判断当滚动

xingyunji / 0评论 2016-10-03