scrollIntoView用法

最新推荐文章于 2024-03-05 11:35:24 发布

鸿心

最新推荐文章于 2024-03-05 11:35:24 发布

阅读量774

点赞数

文章标签： javascript css html

本文链接：https://blog.csdn.net/ZhiShiCaiFu/article/details/120758464

版权

<html>
  <head>
    <title>scrollIntoView用法</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <button onClick="onc()">点击改变</button>

    <div style="width:400px; height:400px; background-color: red;">
    </div>

    <div id="black" style="width: 400px;height: 900px;background-color: #000;">
    </div>
  </body>
  <script type="text/javascript">
   //作为一个事件的函数来被调用
    function onc () {
        // true ： 黑框（id=black）会置顶显示（实际上是改变了滚动条的位置）
        // false ： 黑框（id=black）会置下显示（实际上是改变了滚动条的位置）
        // var dd = document.getElementById("black").scrollIntoView(false);     
        //scrollIntoView(scrollIntoViewOptions)
        // {behavior: "smooth", block: "end", inline: "nearest"}
        /*
            behavior : 定义动画过渡效果，"auto"(默认) 或 "smooth" 
            block : 定义垂直方向的对齐 "start"(默认) "center" "end" "nearst"
            inline : 定义水平方向的对齐 "start" "center" "end" "nearst"(默认)
        */
        // var dd = document.getElementById("black").scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});     

    }
  </script>
</html>

鸿心

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
scrollIntoView用法

<html> <head> <title>scrollIntoView用法</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <button onClick="onc()">.
复制链接

扫一扫