js控制页面刷新(重新加载)时,滚动条位置不变(页面中子画面)。

js控制页面刷新(重新加载)时,滚动条位置不变(页面中子画面)。,第1张

在你控制刷新的函数上,找到刷新命令之前的位置,在这个命令之前,读取当前窗口滚动条的位置。然后在刷新的命令上,加上参数,参数值就是这个滚动条的位置。然后在你页面打开的最下边。用动态脚本接到这个值,然后写成JS命令,命令就是windowscroll(这个位置的数)就可以了。

关于JS获取与设置文本框、文本域光标位置

//获取光标所在文本框的位置

function getCaret(textbox) {

var control = documentactiveElement;

textboxfocus();

var rang = documentselectioncreateRange();

rangsetEndPoint(“StartToStart”,textboxcreateTextRange())

controlfocus();

alert(rangtextlength);

}

//获取光标所在文本域的位置

function getCaretForTextArea(ZysrID){

var txb = documentgetElementById(ZysrID);//根据ID获得对象

var pos = 0;//设置初始位置

txbfocus();//输入框获得焦点,这句也不能少,不然后面会出错,血的教训啦

var s = txbscrollTop;//获得滚动条的位置

var r = documentselectioncreateRange();//创建文档选择对象

var t = txbcreateTextRange();//创建输入框文本对象

tcollapse(true);//将光标移到头

tselect();//显示光标,这个不能少,不然的话,光标没有移到头当时我不知道,搞了十几分钟

var j = documentselectioncreateRange();//为新的光标位置创建文档选择对象

rsetEndPoint(“StartToStart”,j);//在以前的文档选择对象和新的对象之间创建对象,妈的,不好解释,我表达能力不算太好有兴趣自己去看msdn的资料

var str = rtext;//获得对象的文本

var re = new RegExp(“[//n]“,”g”);//过滤掉换行符,不然你的文字会有问题,会比你的文字实际长度要长一些搞死我了我说我得到的数字怎么总比我的实际长度要长

str = strreplace(re,”");//过滤

pos = strlength;//获得长度也就是光标的位置

alert(pos);

rcollapse(false);

rselect();//把光标恢复到以前的位置

txbscrollTop = s;//把滚动条恢复到以前的位置

}

//设置光标在文本框中的位置

function setCaret(id,pos){

var textbox = documentall(id);

var r = textboxcreateTextRange();

rcollapse(true);

rmoveStart(‘character’,pos);

rselect();

}

//设置光标位置的调用函数

function readyforset(id){

var pos = documentgetElementById(‘setpos’)value;

setCaret(id,pos);

}

if(!-[1,])//如果是IE

{

var p=getCursortPosition(obj);;

}

if(p>0)

{

setCaretPosition(obj,p);

}

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

说到这里您估计都还很清楚,但既然我说滚动条也是一个元素,那么它是不是也在我们的HTML中呢?又或者它是浏览器的固有的一部分?

如果您觉得它是HTML中的一部分,那么您就对了,因为它是依附容器而存在的,而默认产生滚动条的容器是<body></body>或者<html></html>节,它并不是浏览器固有的一部分,浏览器只是默认完整展示了一整个html文档,并不知道它中间的内容究竟是否需要滚动条的支持。

那么让我们回顾上面的那几行代码吧,假设fixed对您当前(失败)的浏览器无效的话,那么我们来看看它们的结构,外面是html标签,向内是body标签,再向内则是div标签,div标签很明显是它们的一部分,这样假设我们的div标签所设置的定位属性无论如何(四个可能的属性皆没起到什么作用)改变不了自身显示状况。我们能否更换一个思路呢?

刚才我说了,滚动条是容器所固有的,不管是外面那个滚动条,还是里面那个滚动条。那么我能否让这个需要固定的div和那个body或者html容器脱离关系呢?

看到滚动条的控制可以通过CSS的overflow的几个属性来控制,想必大家都不陌生了。(陌生的朋友点击相关链接即可进入查看)

那么我是否可以自己设置两个完全隔离的div来模拟这种场景呢?

<html>

02

<head>

03

<title></title>

04

<style type="text/css">

05

06

html,body {

07

overflow:hidden;

08

margin:0px;

09

width:100%;

10

height:100%;

11

}

12

13

virtual_body {

14

width:100%;

15

height:100%;

16

overflow-y:scroll;

17

overflow-x:auto;

18

}

19

20

fixed_div {

21

position:absolute;

22

z-index:2008;

23

bottom:20px;

24

left:40px;

25

width:800px;

26

height:40px;

27

border:1px solid red;

28

background:#e5e5e5;

29

}

30

</style>

31

</head>

32

33

<body>

34

<div class="fixed_div">I am still here!</div>

35

<div class="virtual_body">

36

<div style="height:888px;">

37

I am content !

38

</div>

39

</div>

40

</body>

41

</html>

需要准备的材料分别有:电脑、html编辑器、浏览器。

1、首先,打开html编辑器,新建html文件,例如:indexhtml,并引入jquery。

2、在indexhtml中的<script>标签,输入jquery代码:

$('body')append('height: ' + $(document)height() + '<br/>');

$('body')append('width: ' + $(document)width());

3、浏览器运行indexhtml页面,此时会打印出界面最大可以滚动的文档宽度和文档高度。

请使用

fullPagejs插件。可以自行百度一下。

参考代码:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <style type="text/css">

            body {

                color: #FFFFFF;

            }

            

            section1 {

                background-color: #BFDA00;

            }

            

            section2 {

                background-color: #2EBE21;

            }

            

            section3 {

                background-color: #2C3E50;

            }

        </style>

        <title></title>

        <link rel="stylesheet" href="css/jqueryfullPagecss" />

        <script type="text/javascript" src="//js/jqueryjs"></script>

        <script type="text/javascript" src="js/jqueryfullPagejs"></script>

        <script>

            $(function() {

                 $("#ido")fullpage();

            });

        </script>

    </head>

    <body>

        

        <div id="ido">

    <div class="section section1">

        <h1>每一个section是一屏,这是第一屏</h3>

    </div>

    <div class="section section2">

        <h1>每一个section是一屏,这是第二屏</h3>

    </div>

    <div class="section section3 active">

        <h1>每一个section是一屏,这是第三屏</h3>

    </div>

    <div class="section section4">

        <h1>每一个section是一屏,这是第四屏</h3>

    </div>

</div>

    </body>

</html>

css  js 自己引用啊

你的描述很不清楚,我只能认为元素位于浏览器正中位置了。因为对于滚动条只能获取它的scrollTop,那么只能在这个上面想办法。在这里你就要建立一个等式,四个参数,滚动条的scrollTop,window的height,目标元素的offersettop和它自身的height。给window一个scroll事件,

通过验证上面所说的等式是否成立,执行你要的代码。

关键

你要确定你的某个元素要在何时触发你的事件

若要想判断js windowscroll是否滚动到底部,需要用的三个属性值,它们分别是:

scrollTop、clientHeight和scrollHeight;

1、scrollTop为滚动条在Y轴上的滚动距离。

2、clientHeight为内容可视区域的高度。

3、scrollHeight为内容可视区域的高度加上溢出(滚动)的距离。

so,滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight。

以上就是关于js控制页面刷新(重新加载)时,滚动条位置不变(页面中子画面)。全部的内容,包括:js控制页面刷新(重新加载)时,滚动条位置不变(页面中子画面)。、js 获取文本框位置、js 如何让滚动条自动定位到页面一半的位置,不要误差等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/9419026.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-28
下一篇 2023-04-28

发表评论

登录后才能评论

评论列表(0条)

保存