首页 / JAVASCRIPT / div浮层,滚动条移动,位置保持不变的4种方法汇总

div浮层,滚动条移动,位置保持不变的4种方法汇总

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了div浮层,滚动条移动,位置保持不变的4种方法汇总，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4350字，纯文字阅读大概需要7分钟。

内容图文

div在顶部不变、滚动条滚动，div还是在顶部！直接上传源码了：

方法一：
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

<html xmlns="http://www.w3.org/1999/xhtml ">
<head>
<title>div浮层，滚动条移动，保持位置不变</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body{background-image:url(about:blank);background-attachment:fixed;}
#float{width:344px;height:34px;border:1px solid #C0DBF8;position:absolute;top:0px;}
</style>
</head>
<body>
<div id="float" >ddd</div>
 
 
 
 
 
 
</body>
<script type="text/javascript">
var IO=document.getElementById('float'),Y=IO,H=0,IE6;
IE6=window.ActiveXObject&&!window.XMLHttpRequest;
while(Y){H+=Y.offsetTop;Y=Y.offsetParent};
if(IE6)
 IO.style.cssText="position:absolute;top:(this.fix?(document.documentElement.scrollTop-(this.javascript||"+H+")):0)";
window.onscroll=function (){
 var d=document,s=Math.max(d.documentElement.scrollTop,document.body.scrollTop);
 if(s>H&&IO.fix||s<=H&&!IO.fix)return;
 if(!IE6)IO.style.position=IO.fix?"":"fixed";
 IO.fix=!IO.fix;
};
try{document.execCommand("BackgroundImageCache",false,true)}catch(e){};
</script>
</html>

方法二：
代码如下:
<body topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" style="overflow: hidden;">

<div style="width: 100%; height: 100%; overflow: scroll;">
 
 
 
 
</div>
<div style="border: 1px red solid; width: 300px; height: 300px;margin:-150px 0 0 -150px; position: absolute; left: 50%; top: 50%;">
居中的层
 </div>
</body>

方法三：
代码如下:
<body topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" style="overflow: hidden;">

<iframe src="//www.gxlcms.com" width="100%" height="100%" frameborder="0"></iframe>
<div style="border: 1px red solid; width: 300px; height: 300px;margin:-150px 0 0 -150px; position: absolute; left: 50%; top: 50%;">
居中的层
</div>
</body>

方法四：[采用css来居中]
代码如下:
<style type="text/css">
<!--
html,body {height:100%; margin:0px; font-size:12px;}

.mydiv {
background-color: #f9fff6;
border: 1px solid #009900;
text-align: center;
line-height: 25px;
font-size: 13px;
font-weight: bold;
z-index:99;
width: 300px;
height: 50px;
left:50%;/*FF IE7*/
top:50%;/*FF IE7*/

margin-left:-150px!important;/*FF IE7 half of its width */
margin-top:-60px!important;/*FF IE7 half of its height*/

margin-top:0px;
position:fixed!important;/*FF IE7*/
position:absolute;/*IE6*/

_top:       expression(eval(document.compatMode &&
            document.compatMode=='CSS1Compat') ?
            documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
            document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/

}
-->
</style>
<script language="javascript" type="text/javascript">
function showDiv(){

document.getElementById('popDiv').style.display='block';

}
window.onload=function(){
showDiv();
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>始终在中间DIV (支持IE FF)</title>
</head>
<body>
<div id="popDiv" class="mydiv" style="display:none;">始终在中间 
</div>
 
</body>
</html>

内容总结

以上是互联网集市为您收集整理的div浮层,滚动条移动,位置保持不变的4种方法汇总全部内容，希望文章能够帮你解决div浮层,滚动条移动,位置保持不变的4种方法汇总所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/364263.html

来源：【匿名】

【上一篇】Javascript实现返回上一页面并刷新的小例子【下一篇】javascript 怎么调用php方法

更多 ►

【div浮层,滚动条移动,位置保持不变的4种方法汇总】教程文章相关的互联网学习教程文章

js基础---其余的样式相关的属性/判断滚动条是否到底

注意：以下样式都是只读的元素.clientHeight - 元素的可见高度，指元素的内容区和内边距的高度元素.clientWidth - 元素的可见宽度，指元素的内容区和内边距的宽度元素.offsetHeight - 整个元素的高度，包括内容区、内边距、边框元素.offfsetWidth - 整个元素的宽度，包括内容区、内边距、边框元素.offsetParent - 当前元素的...

js 滚动条判断是否滚动到底部【代码】

return this.$refs.panel.scrollTop == this.$refs.panel.scrollHeight - this.$refs.panel.offsetHeight; 容器要设置高度，固定高度，否则滚动的是body，this.$refs.panel.scrollTop永远都是0原文：https://www.cnblogs.com/saving/p/10779314.html

javascript 学习之自定义滚动条加滚轮事件【代码】【图】

要自己写一个自定义滚动条加上滚轮事件，之前的没有滚轮事件不完整，今天整理了一个。1.滚轮事件是不兼容的，firefox中是必需要用事件绑定的添加，用的DOMMouseScroll，当滚动鼠标的时候，只要鼠标滚动的方法就行了，而这通过检测datail的正负号就可以确定2.其他的用mousewheel(Ie是onmousewheel),通过检测wheelDelta 1 <!doctype html>2 <html>3 <head>4 <title>拖拽-加滚轮</title>5 <style>6 .main{ width: 300...

javascript之检测浏览器滚动条宽度【代码】【图】

在编写javascript代码时，有时需要用到滚动条的宽度，然而不同浏览器下滚动条的宽度可能不同。在jquery ui源代码中发现这样的一段代码：var scrollbarWidth=function () { if (cachedScrollbarWidth !== undefined) { return cachedScrollbarWidth; } var w1, w2, div = $("<div style=‘display:block;position:absolute;width:50px;height:50px;overflow:hidden;‘><div style=‘height:100px;width:auto;‘></div></div>")...

python 通过js控制滚动条拉取全文通过psutil获取pid窗口句柄，通过win32gui使程序窗口前置通过pyauto实现右键菜单和另存为操作【代码】

1.参考利用 Python + Selenium 自动化快速截图利用 Python + Selenium 实现对页面的指定元素截图(可截长图元素)使用python获取系统所有进程PID以及进程名称 python锁定焦点到指定进程窗口的参考方法 2.改进js代码，下拉和上拉，精确判断加载是否结束#!/usr/bin/env python# -*- coding: UTF-8 -*import timefrom selenium import webdriverfrom selenium.webdriver.support.ui import WebDriverWaitfrom selenium.common.exceptio...

javascript自定义滚动条插件，几行代码的事儿【代码】

在实际项目中，经常由于浏览器自带的滚动条样式太戳，而且在各个浏览器中显示不一样，所以我们不得不去实现自定义的滚动条，今天我就用最少的代码实现了一个自定义滚动条，代码量区区只有几十行，使用起来也非常方便。<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>自定义滚动条</title><style type="text/css"> body,ul,dl,dd{ margin:0; padding:0; font-size:12px; ...

JavaScript学习笔记- 自定义滚动条插件【代码】

此滚动条仅支持竖向（Y轴）一、Css 1/*这里是让用户鼠标在里面不能选中文字，避免拖动的时候出错*/ 2body { -moz-user-select: none; /*火狐*/ -webkit-user-select: none; /*webkit浏览器*/ -ms-user-select: none; /*IE10*/ -khtml-user-select: none; /*早期浏览器*/ user-select: none; }3 4/*滚动文本及滚动条大框*/ 5.scroll_con { width: 500px; height: 500px; background-color: #5c0af7; position: relative; overflow-y...

javascript下for(in)语句获得所有style的【scrollbar】滚动条样式内容_表单特效

events=[];for(o in O=obj.currentStyle)events.push(o+'='+O[o]) 这里输入代码内容 0 events=[''];for(o in O=obj.currentStyle)if(/^scrollbar/.test(o))events.push(o+'='+O[o]) obj.innerHTML=''+events.sort().join('')+'' [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

jQuery页面图片伴随滚动条逐渐显示的小例子

代码如下:<script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.lazyload.js"></script> <script type="text/javascript"> jQuery(document).ready( function($){ $("container").lazyload();$("img").lazyload({ placeholder : "grey.gif", //加载图片前的占位图片 effect : "fadeIn" //加载图片使用的效果(淡入) }); });</script> <style type="...

基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动

1、准备一张二维码图片，大小、图片自己定义我这里用的宽度和高度都是253，名称weixin.jpg <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>二维码图片固定在右下角某处并跟随滚动条滚动</title> </head> ...

窗体滚动条出现在左侧的实例代码_文字特效

究其方法，只需在Body标签中加入dir=rtl即可，简单吧？让滑块在窗口左边出现我我我我我我我我我我我我我我我我我我 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

js图片延迟加载(随滚动条滑动)

今天，看新浪微博，发现，他们的图片是随着滚动条下拉，图片随之加载，就从网上搜索了下。发现，网上大部分，的代码，都一样。不知道，这种实现方法，优化性能是不是很高！把代码贴上：关于jquery.lazyload.js的更多用法，可以在百度上搜搜!php技术问题欢迎加群探讨：256271784，验证码:cxy,不写验证不予通过哟~

【荐】JS+CSS实现用滚动条控制图片水平展示效果

www.xibaonpx.com"> 【荐】JS+CSS实现用滚动条控制图片水平展示效果_ 济南银屑病医院( http://www.xibaonpx.com">济南银屑病医院) body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td{margin:0;padding:0;font-size:12px} table{border-collapse:collapse;border-spacing:0;} fieldset,img{border:0;} address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-we...

javascript-Echarts中的图例legend过多可否加滚动条

问题如题目，求具体实现方法回复内容：问题如题目，求具体实现方法

javascript-网站右边突然多出了一个滚动条，怎么回事？【图】

不知道怎么回事，PC端网站的每个网页右边都多了一个滚动条，这个滚动条里面还没有东西。我想知道这玩意儿是怎么产生的，以前从来没有发生过这种问题啊。（没有用iframe框架）网址链接是：成航先森www.capjsj.cn 求大神帮忙看看，谢谢。回复内容：不知道怎么回事，PC端网站的每个网页右边都多了一个滚动条，这个滚动条里面还没有东西。我想知道这玩意儿是怎么产生的，以前从来没有发生过这种问题啊。（没有用iframe框架）网址...

首页 / JAVASCRIPT / div浮层,滚动条移动,位置保持不变的4种方法汇总

div浮层,滚动条移动,位置保持不变的4种方法汇总

内容导读

内容图文

内容总结

内容备注

内容手机端

【div浮层,滚动条移动,位置保持不变的4种方法汇总】教程文章相关的互联网学习教程文章

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程