JS 指定元素滚动到屏幕中间

最新推荐文章于 2024-06-28 12:01:05 发布

莱米code

最新推荐文章于 2024-06-28 12:01:05 发布

阅读量4k

点赞数 3

分类专栏： javascript WEB前端文章标签： javascript

本文链接：https://blog.csdn.net/qq1154479896/article/details/123616535

版权

javascript 同时被 2 个专栏收录

24 篇文章 0 订阅

订阅专栏

WEB前端

20 篇文章 0 订阅

订阅专栏

点击元素，使该元素滚动到屏幕中间

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>scroll-to-view-center</title>
  </head>
  <style>
    * {
      padding: 0;
      margin: 0;
      list-style: none;
    }
    li {
      line-height: 100px;
      text-align: center;
      background: skyblue;
    }
    li:nth-child(odd) {
      background-color: pink;
    }
  </style>
  <body>
    <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>
    </ul>
    <script>
      // 兼容写法，获取滚动条的高度
      function getWindowScrollTop() {
        var scroll_top = 0;
        if (document.documentElement && document.documentElement.scrollTop) {
          scroll_top = document.documentElement.scrollTop;
        } else if (document.body) {
          scroll_top = document.body.scrollTop;
        }
        return scroll_top;
      }
      
      /**
       * 核心方法 
       */
      function scrollToViewCenter(el) {
        const { top, height } = el.getBoundingClientRect();
        // 元素的中心高度
        const elCenter = top + height / 2;
        // 窗口的中心高度
        const center = window.innerHeight / 2;
        window.scrollTo({
          top: getWindowScrollTop() - (center - elCenter),
          behavior: 'smooth'
        });
      }

      document
        .querySelectorAll('li')
        .forEach((el) => el.addEventListener('click', (e) => scrollToViewCenter(e.target)));
    </script>
  </body>
</html>

莱米code

关注

3
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
JS 指定元素滚动到屏幕中间

点击元素，使该元素滚动到屏幕中间<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"
复制链接

扫一扫

专栏目录