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

scrolltop div滚动条 html代码 div

hong

0 关注 0 粉丝 0 动态

相关推荐

Python selenium 滚动条

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

letheashura 2020-05-10

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

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

hgzhang 2019-12-05

加载更多数据 infinite ajax scroll 分页

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

lpch0 2014-01-16

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

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

JavaJspSsh 2019-11-18

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

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

骷髅狗 2019-11-04

jQuery中的CSS（五）

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

zengni 2019-11-02

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

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

dly 2015-05-29

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

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

jluzh00 2019-09-08

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

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

hanfox 2019-05-29

jQuery判断滚动到底部或顶部

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

dengjianbin 2018-08-24

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

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

luckylqh 2019-04-13

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

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

gjcxywwx 2019-07-01

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

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

ajhongshaorou 2019-06-29

jquery scrollTop到达指定位置！

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

CodeTerminator 2018-10-17

jQuery判断滚动到底部或顶部

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

81497307 2018-08-24

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

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

Burgdan 2017-03-19

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

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

CoreyJia 2017-03-14

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

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

JessieJWang 2019-06-28

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

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

84483065 2016-03-08

动画历程之滚动的坑

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

zaocha 2019-06-27

hong

W3CSchool教程: HTML 教程; CSS 教程; Bootstrap 教程; Javascript 教程; jQuery 教程

后端教程: C 教程; Java 教程; PHP 教程; Python 教程; Go 教程

移动开发: Android 教程; Swift 教程; Kotlin 教程; jQuery Mobile 教程; ionic 教程

关于我们: 新闻动态; 联系方式; 招聘英才; 安科实验室; 帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号京公网安备11010802014868号