-
2018-01-30 20:24:46
div位置的限定:
在实际效果中有时会需要将某一部分内容限定在指定位置,不随滑轮的滚动而滚动:
在css中添加一个position属性即可。.title{ background-color:pink; height:90px; width:1400px; margin-top:-8px; margin-left:-8px; margin-right:-8px; position: fixed; }
更多相关内容 -
JS控制div跳转到指定的位置的几种解决方案总结
2020-10-21 04:40:15主要介绍了JS控制div跳转到指定的位置的几种解决方案总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。 -
jQuery实现将div中滚动条滚动到指定位置的方法
2020-10-21 18:56:26主要介绍了jQuery实现将div中滚动条滚动到指定位置的方法,涉及jQuery结合animate方法动态操作页面元素属性的相关技巧,需要的朋友可以参考下 -
如何让DIV固定在页面的某个位置
2021-06-12 09:49:51利用JavaScript脚本,从浏览器中获取各个关于位置的参数,然后将其计算后,定位在窗体的右下角。可以承认,这个方法确实是比较自然的想法,也是很常见的方法,但是这样的方法有以下几个缺点:1、使用了大量的计算,...利用JavaScript脚本,从浏览器中获取各个关于位置的参数,然后将其计算后,定位在窗体的右下角。可以承认,这个方法确实是比较自然的想法,也是很常见的方法,但是这样的方法有以下几个缺点:
1、使用了大量的计算,每次滚动,都少不了一大堆的运算。
2、使用了JavaScript脚本,脚本这东西受到浏览器的限制,即便没有限制,也同样因为网页的下载模式问题,可能因为脚本下载未完成或者下载失败而致使脚本无法正确运行。
3、条条大路通罗马,但是看看那方块,当快速滚动滚动条的时候,会发现那个可爱的方块抖动地厉害。这也难怪,那么多的计算谁能受得了?
那有没有比较“平静”高效的表示方式呢?比如是否有一种用CSS的方式呢?
首先,我们将目光投向了CSS规范,我想很多人和我一样很快就想到了position属性,说到定位,我们很容易想到这个属性。这个属性一共有四个选项:static、relative、absolute、fixed(详情请点击)。很高兴,我们在阅读了相关的注释后,我们大概能看到fixed是比较符合我们的需求的:
fixed:
位置被设置为 fixed 的元素,可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过 ”left”、”top”、”right” 以及”bottom” 属性来规定。不论窗口滚动与否,元素都会留在那个位置。工作于 IE7(strict 模式)。
于是我们很快就有了以下的代码,不过很遗憾,IE中并不能通过严格的测试,但是FireFox中却可以通过测试!
Only fit FireFox! :(.fixed_div{
position:fixed;
left:200px;
bottom:20px;
width:400px;
}
content, I’m content不管上面上面说的IE7的strict模式,很显然,除了IE7,我们的挑战还有包括IE6在内的一大堆未知的因素。很显然,虽然这个方法通过了FireFox,但我们还是宣告失败了。
难道我们只能使用JavaScript让这一切继续“卡”下去么?(我指的是用JavaScript的时候效果很卡)
当然不行,我们的症结究竟在哪?我们该如何去解除它呢?带着这样的郁闷,我们需要开始新的探险。
HTML究竟是啥?
这个问题换在别的地方问,您可能要搬出一大堆的文档来告诉我HTML的定义,但这里我并不需要那么完整的答案。我们知道HTML是由一大堆的组成的,而这一大堆的组合在一起,它们的结构就像一棵树,是的,HTML的代码就是被解释为了一棵树被浏览器所认识。它有一个根,那就是节(root),在根节点下常见的节点中,我们通常能见到
和两个节点,它们之下又有……现在回顾一下我们的问题,我们的问题是我们滚动滚动条的时候我们希望其中的一个指定的div不会跟着滚动条滚动。
那么下面让我们来回答另一个问题,啥是滚动条?
滚动条,顾名思义,就是可以滚动的条(ScrollBar)(废话
)。准确地说,滚动条通常是我们在页面的内容超过了浏览器显示框的范围的时候,为了能够让有限的空间展示无限的内容所作出的一个妥协的元素,使用它可以让我们查看当前页面内容之外部分的内容。
说到这里您估计都还很清楚,但既然我说滚动条也是一个元素,那么它是不是也在我们的HTML中呢?又或者它是浏览器的固有的一部分?
如果您觉得它是HTML中的一部分,那么您就对了,因为它是依附容器而存在的,而默认产生滚动条的容器是
或者节,它并不是浏览器固有的一部分,浏览器只是默认完整展示了一整个html文档,并不知道它中间的内容究竟是否需要滚动条的支持。那么让我们回顾上面的那几行代码吧,假设fixed对您当前(失败)的浏览器无效的话,那么我们来看看它们的结构,外面是html标签,向内是body标签,再向内则是div标签,div标签很明显是它们的一部分,这样假设我们的div标签所设置的定位属性无论如何(四个可能的属性皆没起到什么作用)改变不了自身显示状况。我们能否更换一个思路呢?
刚才我说了,滚动条是容器所固有的,不管是外面那个滚动条,还是里面那个滚动条。那么我能否让这个需要固定的div和那个body或者html容器脱离关系呢?
看到滚动条的控制可以通过CSS的overflow的几个属性来控制,想必大家都不陌生了。(陌生的朋友点击相关链接即可进入查看)
那么我是否可以自己设置两个完全隔离的div来模拟这种场景呢?(虽说是模拟,但是效果一模一样噢~)
html,body {
overflow:hidden;
margin:0px;
width:100%;
height:100%;
}
.virtual_body {
width:100%;
height:100%;
overflow-y:scroll;
overflow-x:auto;
}
.fixed_div {
position:absolute;
z-index:2008;
bottom:20px;
left:40px;
width:800px;
height:40px;
border:1px solid red;
background:#e5e5e5;
}
I am still here!I am content !
分析:
html,body:将默认可能会随机出现的滚动条,完全地隐藏了,这样不管您放了啥内容,它们都不会出来了。
.virtual_body:顾名思义,就是一个假的body了,它被设置为长宽都为100%的,意思就是它利用了所有可视的浏览器窗体显示所有的内容,并垂直允许出现滚动条。
.fixed_div:这下它可以利用绝对值进行定位了,因为在这个场景下,这个页面100%地被那个假冒的body给独霸了,而滚动条反正也出不来,您就可以自认为是在某个点蹲坑了,绝对安全。
想必您通过这些代码已经了解了新的方法不过是将一个div换作了之前的body。
通过这篇文章,希望您能解决这个问题,更深入一点,希望您能够对HTML的具体内容有更深刻地理解
-
jQuery实现将div的滚动条滚动到指定位置
2019-10-27 23:04:11jQuery实现将div的滚动条滚动到指定位置 jQuery实现将div的滚动条滚动到指定位置 -
可编辑div在光标位置插入指定内容
2018-02-07 15:19:41可编辑div在光标位置插入指定内容 //在光标位置插入内容 insertContent(content) { if (!content) {//如果插入的内容为空则返回 return; } let sel = null; if (document.selection) {//IE9以下 sel = ...可编辑div在光标位置插入指定内容
//在光标位置插入内容 insertContent(content) { if (!content) {//如果插入的内容为空则返回 return; } let sel = null; if (document.selection) {//IE9以下 sel = document.selection; sel.createRange().pasteHTML(content); } else { sel = window.getSelection(); if (sel.rangeCount > 0) { let range = sel.getRangeAt(0); //获取选择范围 range.deleteContents(); //删除选中的内容 let el = document.createElement("div"); //创建一个空的div外壳 el.innerHTML = content; //设置div内容为我们想要插入的内容。 let frag = document.createDocumentFragment();//创建一个空白的文档片段,便于之后插入dom树 let node = el.firstChild; let lastNode = frag.appendChild(node); range.insertNode(frag); //设置选择范围的内容为插入的内容 let contentRange = range.cloneRange(); //克隆选区 contentRange.setStartAfter(lastNode); //设置光标位置为插入内容的末尾 contentRange.collapse(true); //移动光标位置到末尾 sel.removeAllRanges(); //移出所有选区 sel.addRange(contentRange); //添加修改后的选区 } } }
需注意:在谷歌浏览器下测试发现:
document.execCommand("inserHTML", "false", '<p><img src="./test.png" /></p>);
当使用这种方式插入html内容时,p标签不见了,只有img标签存在。但是如果单独插入一个p标签时,p标签又存在。故经多次测试发现inserHTML方式只适合插入单个标签,复合标签插入时则解析错乱。
使用方式
let imgTag = `<p><img src=${eidtorImg.src} /></p>`; this.insertContent(imgTag); //content内容为html字符串。
-
js生成div并在指定位置显示出来
2018-12-05 15:57:29然后将请求后的数据 生成一个div 在该输入框下方显示出来。下面是具体实现方法; js: 创建请求 //创建请求 function createXMLHttpRequest() { xmlHttp = false; if (window.XMLHttpRequest) { //for Mozilla...
点击客户名称输入内容 ,触发post请求向后台请求数据(模糊查询)。然后将请求后的数据 生成一个div 在该输入框下方显示出来。下面是具体实现方法;
js:
创建请求//创建请求 function createXMLHttpRequest() { xmlHttp = false; if (window.XMLHttpRequest) { //for Mozilla xmlHttp = new XMLHttpRequest(); if (xmlHttp.overrideMimeType) { xmlHttp.overrideMimeType("text/xml"); } } else if (window.ActiveXObject) { //for IE try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { } } } if (xmlHttp == undefined || xmlHttp == null) { alert("XMLHttpRequest对象创建失败!!"); } else { this.xmlhttp = xmlHttp; } }
获取查询结果(输入框里的内容,每隔500ms 提交一次)
function getSearchResult(queryurl, tbname, hfnameid, iflag, btngetinfo, event) { txtname = tbname; txtnameid = hfnameid; btntgetinfo = btngetinfo; runcount = runcount + 1; var tempscreen = screenval; screenval = escape($(txtname).value); var tempcount = runcount; //过滤500毫秒内的重复提交,重复不提交,空值不提交 setTimeout(function () { if (event.keyCode != 38 && event.keyCode != 40 && event.keyCode != 32 && event.keyCode != 9 && event.keyCode != 13 && (tempcount == runcount && tempscreen != screenval && screenval.length > 0 && runcount != 1)) { runcount = 0; //允许提交后重置运行标识 createXMLHttpRequest(); //初始化XMLHttpRequest对象 if (!xmlHttp) { window.alert("Cannot create XMLHttpRequest instance!"); return false; } var parmurl = "keydata=" + escape($(txtname).value); //创建请求的URL if (iflag == 1) { parmurl += "&f=1"; } xmlHttp.onreadystatechange = callback; //设置处理响应的回调函数 xmlHttp.open("POST", queryurl, true); //打开与服务器的连接,使用post方式 xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;"); //post需要设置请求表头 xmlHttp.send(parmurl); //发送请求并设置参数,参数的设置为param=value的形式 } else { //alert(tempcount + "," + runcount + "," + tempscreen + "," + screenval + "," + screenval.length); } }, 500) if (screenval.length < 1) { MoveDivTableBlur(); } }
回调函数 返回查询的信息
//返回查询信息 function callback() { //响应完成且响应正常 // if(objXMLHttp.readyState == 1){ // alert("XMLHttpRequest对象开始发送请求"); // }else if(objXMLHttp.readyState == 2){ // alert("XMLHttpRequest对象的请求发送完成"); // }else if(objXMLHttp.readyState == 3){ // alert("XMLHttpRequest对象开始读取服务器的响应"); // }else if(objXMLHttp.readyState == 4){ // alert("XMLHttpRequest对象读取服务器响应结束"); if (xmlHttp.readyState == 4) { if (xmlHttp.status == 200) { //信息已经成功返回,开始处理信息 //返回信息为空 if (xmlHttp.responseText.trim() == "") { //如果已存在id为contents的div 则移除然后重新生成 if ($("contents")) document.body.removeChild(divtable); } else { createTable(xmlHttp.responseText); } } else { window.alert("未知错误!"); return false; } } }
创建装在返回结果的载体DIV
function createTable(strtable, divheight,obj,e) { if ($("contents")) document.body.removeChild(divtable); divtable = window.document.createElement("div"); divtable.setAttribute("id", "contents"); divtable.setAttribute("class", "tbData"); divtable.style.position = "absolute"; divtable.innerHTML = ""; var strcon = "<iframe style=\"position: absolute;z-index: 2;height:0px;width:0px;\" frameborder=\"0\"></iframe>"; divtable.innerHTML = strcon + strtable; divtable.zIndex = "100"; divtable.style.zIndex = "800"; divtable.style.overflow = "auto"; divtable.style.height = "235px"; divtable.style.width = "430px"; var opt = $(txtname).offsetParent; var oft = $(txtname).offsetTop; var ofh = $(txtname).offsetHeight; var ofl = $(txtname).offsetLeft; divtable.style.top = oft + ofh + "px"; divtable.style.left = ofl + "px"; document.body.appendChild(divtable); }
屏蔽几个特殊键盘按键
document.onkeydown = function (e) { if (document.getElementById("gvice")) { e = window.event || e; switch (e.keyCode) { case 38: // 上方向键 currentLine--; changeItem(); break; case 40: // 下方向键 currentLine++; changeItem(); break; // Backspace case 32: MoveDivTable(); break; // Tab case 9: MoveDivTable(); // Enter case 13: MoveDivTable(); break; default: break; } } }
选中后为文本框赋值
// 选择行 function changeItem() { var it = document.getElementById("gvice"); for (var j = 0; j < it.rows.length; j++) { it.rows[j].className = "bsltrowc"; } if (currentLine < 0) { currentLine = it.rows.length - 1; } if (currentLine == it.rows.length) { currentLine = 0; } if (it.rows.length == 1) { currentLine = 0; } if (it.rows[currentLine]) { it.rows[currentLine].className = "sltrowc"; $(txtnameid).value = it.rows[currentLine].id; $(txtname).value = it.rows[currentLine].cells[1].innerHTML.split('-')[0]; } } //单击取值 function clickItem(clicktLine) { if (document.all) { var it = document.getElementById("gvice").children[0]; } else { var it = document.getElementById("gvice"); } for (i = 0; i < it.rows.length; i++) { it.rows[i].className = "bsltrowc"; } //为text文本框赋值 it.rows[clicktLine].className = "sltrowc"; $(txtnameid).value = it.rows[clicktLine].id; $(txtname).value = it.rows[clicktLine].cells[1].innerHTML;//.split('-')[0]; currentLine = clicktLine; if (btntgetinfo != null && btntgetinfo != "") $(btntgetinfo).click(); } //单击取值 function clickItemGoods(clicktLine) { if (document.all) { var it = document.getElementById("gvice").children[0]; } else { var it = document.getElementById("gvice"); } for (i = 0; i < it.rows.length; i++) { it.rows[i].className = "bsltrowc"; } //为text文本框赋值 it.rows[clicktLine].className = "sltrowc"; $(txtnameid).value = it.rows[clicktLine].id; $(txtname).value = it.rows[clicktLine].cells[1].innerHTML;//.split('-')[0]; $(txtclassname).value = it.rows[clicktLine].cells[2].innerHTML;//.split('-')[0]; $(txtbrandname).value = it.rows[clicktLine].cells[3].innerHTML;//.split('-')[0]; if ($(txtclassname).value.length < 1) { $(txtclassname).value = ""; } if ($(txtbrandname).value.length < 1) { $(txtbrandname).value = ""; } currentLine = clicktLine; if (btntgetinfo != null && btntgetinfo != "") $(btntgetinfo).click(); } //移除Div function MoveDivTable() { if ($("contents")){ document.body.removeChild(divtable); } if ($("contentsRow")){ document.getElementById("UpdatePanel2").removeChild(divtable); } if (btntgetinfo != null && btntgetinfo != "") $(btntgetinfo).click(); } //焦点消失后移除div function MoveDivTableBlur() { setTimeout(function () { if ($("contents")){ document.body.removeChild(divtable); } if ($("contentsRow")){ document.getElementById("UpdatePanel2").removeChild(divtable); } }, 200) }
总结:在获取生成div位置时遇到一些问题 就是关于 offsetTop 以及 offsetLeft 的如何取距离父层的长度,详情可见我的另一篇博客。
-
Js控制div滚动到指定的位置
2020-08-03 21:38:44有时候可能为了简便或者其他原因,我们用某个div放了一长串内容,想要保证内容可以滚动,但是也会有其他情况,比如需要从别的界面进入该div的时候到指定位置,那么可以采用以下方式: <div id="test_div"> ... -
可编辑div中指定位置插入内容的方法
2017-07-15 04:18:42本文实例讲述了js实现在可编辑div中指定位置插入内容的方法,就像我们使用的编辑器一样,分享给大家供大家参考。具体实现方法如下:首先要让DIV启用编辑模式<div contenteditable=true id="divTest"></div>通过设定... -
固定div在某个位置
2018-06-26 14:25:02固定div在某个位置,拉动滚动条同样在那个位置,类似网页上面的广告 <div style="position:fixed;z-index:1;top: 0.5px;padding-left: 15px;background-color: #FFFFFF"></div&... -
jquery实例:让DIV移动到指定的位置标签后面
2018-12-17 13:28:28一个jquery里的简单实例,操作DIV移动到指定标签的后面: 假设网页中有以下几个DIV: <div id="1">1</div> <div id="2">2</div> &... -
vue自定义指令实现滚动div中的元素滚动到指定位置
2020-07-17 14:45:021. src/directive/scroll.js:中写入...//全局自定义指令 给目标元素动画滚动到指定偏移位置 如果绑定值为true 则滚动到顶部 Vue.directive('scroll-top', { /** * * @param {object} el * @param {object} -
求问html中如何在定义div中文字的位置在指定位置,用css样式,
2017-03-13 09:28:37求问html中如何在定义div中文字的位置在指定位置,用css样式,比如把文字显示在div的中下部分 -
position设置div的位置
2021-06-08 15:07:20css怎么调整div的位置可以使用css中的position来对div进行定位来改变div的位置,position可能的值如下: 工具原料:编辑器、浏览器通过设置一个div的...height: 20如何用css控制div在页面中的位置div标签里面... -
DIV内滚动条滚动到指定位置
2018-05-11 17:52:00相对浏览器,将指定div滚到到指定位置,其用法如下: $("html,body").animate({scrollTop: $(obj).offset().top},speed); ps:obj是需要定位的对象,speed是滚动的速度 然而如果需要相对某一个容器... -
css怎么设置div固定位置不变?
2021-06-10 17:21:25在html页面中,css可以设置div固定在页面一个位置,主要通过position属性设置绝对定位实现。下面举例介绍实现的过程。通过position属性来控制;position属性的值常规有四个:static:默认值,没有定位,元素出现在... -
jquery 在指定位置弹出div框
2013-09-13 14:42:441、功能要求:页面上一个div,默认是隐藏起来的,当点击页面中的a标签后,让这个div在a标签位置显示该div。 2、实现代码:$("#aChooseNumber").click(function () { $("#divChooseNumber").css("position", ... -
uniapp 滚动到指定位置后div跟随滚动
2020-12-24 00:30:58htmlbgColor="none":lineScale="0.4"height="80rpx"fontSize="28rpx":tabs="tabs"v-model="current":scroll="false"line-color="#ff679a"active-color="#ff679a"style="width: 100%;"lineHeight="6rpx"@change="chan... -
JQuery+CSS实现头部Div固定在指定位置,随鼠标上下滑动而不变化
2019-02-03 20:54:35头部固定,随鼠标的滑动而位置保持不变【举例:一般电商网站,未登录时,头部登录栏随着鼠标向下滑动,一直位于头部】 css *{ margin:0px; padding:0px; } .main{ width:100%; height:600px; background-color:... -
html js点击按钮滚动跳转定位到页面指定位置(DIV)的方法代码
2021-02-16 16:30:09对于大多数的编程老手来说,这些都不是什么难事,但对于一些新手或者没有深入学习编程开发的人来说,可能不知道如何去实现,在这里就和大家分享一下html js点击按钮滚动跳转定位到页面指定位置(DIV)的方法代码。... -
html中的文本在指定位置换行
2019-10-15 19:01:49在“浏览器处理"中,想在浏览器和处理中间换行,因为某些原因还不想使用换行标签<br>。 <meta charset="utf-8"/> <div style="white-space: pre-wrap"> 浏览器 处理 </div> css里加入... -
拖动div到指定位置
2014-07-15 15:03:01说明:本功能目的在于拖动目标div到鼠标指定的位置。 问题:由于鼠标 -
Vue<点击导航栏滑动到指定位置>
2020-12-22 04:36:59效果图: assignBlock.gif 方法1: v-for="(i,index) in 5" @click="goAssignBlock('block'+ index,50)" :key="index" >GO-{{index}} 0 1 2 3 4 方法2: HTML 书写方式 data-to与指定模块的id相对应 image.png image... -
JQuery将DIV的滚动条滚动到指定的位置
2018-09-28 13:57:04这里有一个方法可以将DIV的滚动条滚动到其子元素所在的位置,方便自动定位。 var container = $('div'),//定义滚动列表div容器 scrollTo = $('#row_8');//定义当前待定位的元素 //方法一 container.scrollTop( ... -
css 在指定div中滚动
2020-04-13 18:57:41div class="box"></div> .box{ overflow-y: scroll; scroll-behavior: smooth; overscroll-behavior: contain;//必须加这个,不然会带动整个屏幕滚动,如果整屏幕也有滚动的话 } ... -
js获取div的位置坐标
2012-05-19 19:28:51js获取指定位置的div坐标,方便用户得到网页上的任何div元素的坐标位置