[HTML] 通过 scrollWidth 属性滚动内容

需求：当内容超出div时，可以通过点击按钮横向滚动内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>滚动条 - 点击滚动内容</title>
    <style>
      div {
        display: inline-block;
        border: 1px solid red;
        margin: 0 auto;
        width: 300px;
        overflow-x: scroll; /* 出现横滚动条 */
        white-space: nowrap; /* 内容不换行 */
      }
      /* 隐藏滚动条 */
      ::-webkit-scrollbar {
        width: 0;
        background: transparent;
      }
    </style>
  </head>
  <body>
    <button id="left"><</button>
    <div id="container">
      this is content1. this is content2. this is content3. this is content.this is content4.
    </div>
    <button id="right">></button>

    <br /><br />

    <button onclick="showWidth()">显示各种宽度值</button>
    <button onclick="alert(isOverflowing())">内容是否超出div</button>
    <p>
      scrollWidth：内容实际宽度（不包滚动条等边线）
    </p>
    <p>
      offsetWidth: div实际宽度 + border宽度 （包滚动条等边线）
    </p>
    <p>
      clientWidth： div实际宽度，不包滚动条等边线
    </p>

    <script>
      var leftBtn = document.querySelector('#left')
      var rightBtn = document.querySelector('#right')
      var container = document.querySelector('#container')

      function showWidth() {
        let container = document.querySelector('#container')
        alert(
          'scrollWidth:' +
            container.scrollWidth +
            ', offsetWidth:' +
            container.offsetWidth +
            ',clientWidth:' +
            container.clientWidth
        )
      }
      // element 是容器对象
      function isOverflowing() {
        var element = container
        return element.scrollWidth > element.offsetWidth
      }

      leftBtn.onclick = function () {
        container.scrollLeft -= 20
        console.log('leftBtn clicked, scrollLeft value is: ' + container.scrollLeft)
      }
      rightBtn.onclick = function () {
        container.scrollLeft += 20
        console.log('leftBtn clicked, scrollLeft value is: ' + container.scrollLeft)
      }
    </script>
  </body>
</html>

Element.scrollWidth Element.scrollLeft web前端学习笔记---scrollWidth,clientWidth,offsetWidth的区别

david2tdw / blog

[HTML] 通过 scrollWidth 属性滚动内容 #173