将元素定位到可视区域

最新推荐文章于 2023-04-27 15:03:17 发布

richest_qi

最新推荐文章于 2023-04-27 15:03:17 发布

阅读量1.6k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qzw752890913/article/details/106638431

版权

JavaScript 专栏收录该内容

48 篇文章 1 订阅

订阅专栏

文章目录

基本demo

将该demo标记为 demo0

    .sidebar{
        float:left;
        list-style: none;
        padding:0;
    }
    .sidebar li{
        padding:0.5em;
    }
    .sidebar a{
        text-decoration: none;
        color:lightgray;
    }
    .sidebar a:hover{
        color:gray;
    }
    .sidebar a:active{
        color:black;
    }
    .content{
        margin-left:120px;
        padding-left:20px;
        border-left:2px solid lightgrey;
    }

<body>
<div id="root">
    <ul class="sidebar">
        <li><a href="#1">Hello world</a></li>
        <li><a href="#2">Installation</a></li>
    </ul>
    <div class="content">
        <div id="1">
            <h3>Hello world</h3>
            <div>Welcome to learning React</div>
        </div>
        <div id="2">
            <h3>Installation</h3>
            <div>You can install React from npm.</div>
        </div>
    </div>
</div>
<script>
    $(function(){
        $('li:first-child a').css('color','black');
    })
</script>
</body>

在这里插入图片描述

将元素定位到可视区域

将元素定位到可视区域，方法挺多的，以下是我自己接触过的几种。

锚点定位

<a>标签的href属性 + 任意标签的id属性
demo里的<a href="#1">Hello world</a> 搭配 <div id="1"> 就是锚点定位

对demo0稍作修改得到demo1，我们来看看锚点定位的效果。

//css改动，新增如下内容
    #root{
        height:100px;
        width:500px;
        overflow-y:auto;
    }

//js改动，新增点击事件及处理程序
    $(function(){
        $('li:first-child a').addClass('active');
        $('li').click(function(){
            if(!$(this).children('a').hasClass('active')){
                $(this).children('a').addClass('active')
                .end()
                .siblings().children('a').removeClass('active');
            }
        })
    })

在这里插入图片描述
点击左侧的Installation，div#2的内容就滚动到了可视区域内，同时地址栏的url变成了D:/workspace/react/reactDemo/index2.html#2，多了#2，#后面的2就是hash，用来标识网页位置。

锚点定位的原理比较简单，就是改变元素的scrollTop或者scrollLeft。本例中，改变了div#root的scrollTop，眼见为实，我们来检验下。

    $(function(){
        console.log($('#root').scrollTop());
        $('#root').scroll(function(){
            console.log($(this).scrollTop());
        })
    })

在这里插入图片描述
scrollTop到底是指哪段距离，下图能解释清楚。
灰色部分，也就是滚动后我们看不到的部分，它的高度就是scrollTop，

<a>标签的href属性 + 任意标签的id属性可以实现锚点定位。如果这个任意标签是<a>标签，那么 <a>标签的href属性 + <a>标签的name属性也能实现锚点定位。

<a>标签的href属性 + <a>标签的name属性
举个例子吧，记作demo2

    #root{
        width:500px;
        height:100px;
        overflow:auto;
    }
    .content{
        height:300px;
    }

<body>
    <div id="root">
        <div class="header">
            投资者关系 | 新闻及媒体资源
            <a href="#bottom" name="top">到底部去</a>
        </div>
        <div class="content"></div>
        <div class="footer">
            加入我们 | 免责声明 | 版权公告 
            <a name="bottom" href="#top">回到顶部</a>
        </div>
        
    </div>
</body>

在这里插入图片描述

scrollIntoView到目标元素

目标元素调用scrollIntoView方法，如bottomElm.scrollIntoView()。
注意哈，这时地址栏里的url没有hash。

将demo2稍稍改造下，记作demo3。

    #root{
        width:500px;
        height:100px;
        overflow:auto;
        background-color:lightyellow
    }
    .content{
        height:300px;
    }
    #top,#bottom{
        font-weight:bold;
    }
    #top:hover,#bottom:hover{
        cursor:pointer;
    }

<body>
    <div id="root">
        <div class="head">
            投资者关系 | 新闻及媒体资源
            <span id="top">到底部去</span> 
        </div>
        <div class="content"></div>
        <div class="foot">
            加入我们 | 免责声明 | 版权公告 
            <span id='bottom'>回到顶部</span>
        </div>
    </div>
    <script>
        var topElm = document.querySelector('#top');
        var bottomElm = document.querySelector('#bottom');
        topElm.onclick = function(){
            bottomElm.scrollIntoView();
        }
        bottomElm.onclick = function(){
            topElm.scrollIntoView();
        }
    </script>
</body>

在这里插入图片描述

focus到目标元素

目标元素调用focus方法，如bottomElm.focus()。
将demo3中的scrollIntoView替换为focus，恩？和我们预期的不一致。
点 到底部去，不动；点回到顶部，也没反应。为啥？？
因为俩都是span标签，都接收不到焦点！！
怎么办？那就用可以接收焦点的标签呗，比如带href属性的<a>标签。

于是对demo3稍作修改，将span#bottom改成带href的a#bottom，得到demo4。

<body>
    <!-- <div id="root"></div> -->
    <div id="root">
        <div class="head">
            投资者关系 | 新闻及媒体资源
            <span id="top">到底部去</span> 
        </div>
        <div class="content"></div>
        <div class="foot">
            加入我们 | 免责声明 | 版权公告 
            <a href='' id='bottom'>回到顶部</a>
        </div>
    </div>
    <script>
        var topElm = document.querySelector('#top');
        var bottomElm = document.querySelector('#bottom');
        topElm.onclick = function(){
            bottomElm.focus();
        }
        bottomElm.onclick = function(){
            topElm.focus();
        }
    </script>
</body>