精华内容
下载资源
问答
  • div控制在指定位置
    千次阅读
    2018-01-30 20:24:46

    div位置的限定:

       在实际效果中有时会需要将某一部分内容限定在指定位置,不随滑轮的滚动而滚动:

    .title{
      background-color:pink;
      height:90px;
      width:1400px;
      margin-top:-8px;
      margin-left:-8px;
      margin-right:-8px; 
      position: fixed;
    
    }
           在css中添加一个position属性即可。


    更多相关内容
  • 主要介绍了JS控制div跳转到指定位置的几种解决方案总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。
  • 主要介绍了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)(废话

    34445095_1.gif)。准确地说,滚动条通常是我们在页面的内容超过了浏览器显示框的范围的时候,为了能够让有限的空间展示无限的内容所作出的一个妥协的元素,使用它可以让我们查看当前页面内容之外部分的内容。

    说到这里您估计都还很清楚,但既然我说滚动条也是一个元素,那么它是不是也在我们的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的滚动条滚动到指定位置 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"> ...
  • 本文实例讲述了js实现可编辑div指定位置插入内容的方法,就像我们使用的编辑器一样,分享给大家供大家参考。具体实现方法如下:首先要让DIV启用编辑模式<div contenteditable=true id="divTest"></div>通过设定...
  • 固定div在某个位置

    千次阅读 2018-06-26 14:25:02
    固定div在某个位置,拉动滚动条同样那个位置,类似网页上面的广告 &lt;div style="position:fixed;z-index:1;top: 0.5px;padding-left: 15px;background-color: #FFFFFF"&gt;&lt;/div&...
  • 一个jquery里的简单实例,操作DIV移动到指定标签的后面: 假设网页中有以下几个DIV: &lt;div id="1"&gt;1&lt;/div&gt; &lt;div id="2"&gt;2&lt;/div&gt; &...
  • 1. src/directive/scroll.js:中写入...//全局自定义指令 给目标元素动画滚动到指定偏移位置 如果绑定值为true 则滚动到顶部 Vue.directive('scroll-top', { /** * * @param {object} el * @param {object}
  • 求问html中如何在定义div中文字的位置在指定位置,用css样式,比如把文字显示在div的中下部分
  • position设置div位置

    千次阅读 2021-06-08 15:07:20
    css怎么调整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:44
    1、功能要求:页面上一个div,默认是隐藏起来的,当点击页面中的a标签后,这个div在a标签位置显示该div。 2、实现代码:$("#aChooseNumber").click(function () { $("#divChooseNumber").css("position", ...
  • uniapp 滚动到指定位置div跟随滚动

    千次阅读 2020-12-24 00:30:58
    htmlbgColor="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...
  • 头部固定,随鼠标的滑动而位置保持不变【举例:一般电商网站,未登录时,头部登录栏随着鼠标向下滑动,一直位于头部】 css *{ margin:0px; padding:0px; } .main{ width:100%; height:600px; background-color:...
  • 对于大多数的编程老手来说,这些都不是什么难事,但对于一些新手或者没有深入学习编程开发的人来说,可能不知道如何去实现,这里就和大家分享一下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...
  • 这里有一个方法可以将DIV的滚动条滚动到其子元素所在的位置,方便自动定位。 var container = $('div'),//定义滚动列表div容器 scrollTo = $('#row_8');//定义当前待定位的元素 //方法一 container.scrollTop( ...
  • css 在指定div中滚动

    千次阅读 2020-04-13 18:57:41
    div class="box"></div> .box{ overflow-y: scroll; scroll-behavior: smooth; overscroll-behavior: contain;//必须加这个,不然会带动整个屏幕滚动,如果整屏幕也有滚动的话 } ...
  • js获取div位置坐标

    热门讨论 2012-05-19 19:28:51
    js获取指定位置div坐标,方便用户得到网页上的任何div元素的坐标位置

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 401,423
精华内容 160,569
关键字:

怎么让div在指定位置