前端～如何让滚动条聚焦到自己想要的位置（关键词 focus,tabindex,scrollIntoView）

最新推荐文章于 2023-04-13 21:00:00 发布

is me monday

最新推荐文章于 2023-04-13 21:00:00 发布

阅读量1.3k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/qq_44742816/article/details/109528884

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一：要想实现的效果

1 a：点击第三个蓝色的div自动跳转到地一个红色的div;
2 b:点击第一个红色的div自动跳转到input输入的位置

html代码

<body>
    <div id="one" style="background-color: red;height: 600px; border: 1px solid;">
    </div>
    <div id="two" style="background-color: green;height: 600px; border: 1px solid;"></div>
    <div id="three" style="background-color: blue;height: 600px; border: 1px solid;"></div>
    <input type="text" id="text" value="this is text input">
</body>

在这里插入图片描述
二：代码实习

方案一：利用scrollIntoView()实现需求a,b

 <script>
        var one=document.getElementById("one")
        var two=document.getElementById("two")
        var three=document.getElementById("three")
        var text=document.getElementById("text")
        //a：点击第三个蓝色的div自动跳转到地一个红色的div;
        three.onclick=function(){
            one.scrollIntoView(
        }
        // b:点击第一个红色的div自动跳转到input输入的位置
        one.onclick=function(){
            text.scrollIntoView()
        }
    </script>

方案二：利用focus()实现需求a,b

 <script>
        var one=document.getElementById("one")
        var two=document.getElementById("two")
        var three=document.getElementById("three")
        var text=document.getElementById("text")
        //a：点击第三个蓝色的div自动跳转到地一个红色的div;
        three.onclick=function(){
            one.focus()//没有效果，因为focus只对table标签有用，实现方案是将div标签添加table属性
        }
        // b:点击第一个红色的div自动跳转到input输入的位置
        one.onclick=function(){
            text.focus()
        }
    </script>

//将div标签添加table属性
<div tabindex="0" id="one" style="background-color: red;height: 600px; border: 1px solid;">
//现在的one.focus（）才其作用

is me monday

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端～如何让滚动条聚焦到自己想要的位置（关键词 focus,tabindex,scrollIntoView）

一：要想实现的效果1 a：点击第三个蓝色的div自动跳转到地一个红色的div;2 b:点击第一个红色的div自动跳转到input输入的位置html代码<body> <div id="one" style="background-color: red;height: 600px; border: 1px solid;"> </div> <div id="two" style="background-color: green;heigh
复制链接

扫一扫