scrollIntoView 让元素滚动到视口顶部底部中间

最新推荐文章于 2024-05-11 13:34:12 发布

baobaosun3271

最新推荐文章于 2024-05-11 13:34:12 发布

阅读量6.3k

点赞数 3

文章标签： scrollIntoView 滚动到中间 js

本文链接：https://blog.csdn.net/qq_27315289/article/details/89959263

版权

element的接口

partial interface Element {
  DOMRectList getClientRects();
  [NewObject] DOMRect getBoundingClientRect();
  void scrollIntoView(optional (boolean or ScrollIntoViewOptions) arg);
  void scroll(optional ScrollToOptions options);
  void scroll(unrestricted double x, unrestricted double y);
  void scrollTo(optional ScrollToOptions options);
  void scrollTo(unrestricted double x, unrestricted double y);
  void scrollBy(optional ScrollToOptions options);
  void scrollBy(unrestricted double x, unrestricted double y);
  attribute unrestricted double scrollTop;
  attribute unrestricted double scrollLeft;
  readonly attribute long scrollWidth;
  readonly attribute long scrollHeight;
  readonly attribute long clientTop;
  readonly attribute long clientLeft;
  readonly attribute long clientWidth;
  readonly attribute long clientHeight;
};

原生的dom对象scrollIntoView方法就是让这个滑进视口参数 boolean 或者 ScrollIntoViewOptions

enum ScrollLogicalPosition { "start", "center", "end", "nearest"};dictionary ScrollIntoViewOptions
 : ScrollOptions { ScrollLogicalPosition block = "start"; ScrollLogicalPosition inline = "nearest";};

写法

demo.scrollIntoView({block:"start"})//开始位置
    demo.scrollIntoView({block:"center"})//中间位置
    demo.scrollIntoView({block:"end"})//末尾位置

demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <!-- Apple devices fullscreen -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <!-- Apple devices fullscreen -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <title>Title</title>
    <style>
        ul > li {
            height: 100px;
            border-bottom: 1px solid #000000;
            line-height: 100px;
            display: inline-block;
            width: 100%;
        }

        #demo {
            background-color: #f00;

        }
    </style>
</head>
<body>
<div class="box" style="width: 300px;height: 300px; border: 1px solid #000;overflow: auto">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li id="demo">13</li>
        <li><a href="#" id="demo1" style="color: #00ff00;">demo</a></li>
        <li>15</li>
        <li>16</li>
        <li>17</li>
        <li>18</li>
        <li>19</li>
        <li>20</li>
    </ul>
</div>
</body>
<script>
    var demo = document.getElementById("demo");
    demo.scrollIntoView({block:"center"})
</script>
</html>

baobaosun3271

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
scrollIntoView 让元素滚动到视口顶部底部中间

element的接口partial interface Element { DOMRectList getClientRects(); [NewObject] DOMRect getBoundingClientRect(); void scrollIntoView(optional (boolean or ScrollIntoViewOptions) arg); vo...
复制链接

扫一扫