HTML - DOM 元素 scrollLeft 屬性

scrollLeft 屬性允許您訪問和更新元素內容水平滾動的距離，以畫素為單位測量元素左邊緣的距離。

語法

設定 scrollLeft 屬性值

element.scrollLeft = pixelValue;

獲取 scrollLeft 屬性值

element.scrollLeft;

屬性值

值	描述
pixelValue	設定元素水平滾動位置的畫素值。如果畫素值為負數，則設定為 0。如果元素無法水平滾動，則值保持為 0。如果畫素值超過最大允許值，則設定為最大允許的滾動位置。

返回值

scrollLeft 屬性返回一個整數，表示以畫素為單位的水平滾動位置。

HTML DOM 元素 'scrollLeft' 屬性示例

以下是一些示例，展示瞭如何使用 'scrollLeft' 屬性調整 HTML DOM 中元素的水平滾動位置。

'scrollLeft' 屬性的基本用法

此示例演示了 scrollLeft 屬性的基本用法，以程式設計方式控制 HTML 中水平可滾動容器的初始滾動位置。頁面載入時，容器將預設向右滾動 200 畫素。

 
<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    #con {
      width: 300px;
      overflow-x: scroll;
      white-space: nowrap;
      border: 1px solid #ccc;
    }
    .box {
      display: inline-block;
      width: 350px;
      height: 200px;
      margin: 30px;
      background-color: Ffb6c1;
      text-align: center; 
    }
  </style>
</head>

<body>
  <h1>HTML - DOM Element</h1>
  <h2>scrollLeft property</h2>
  <p>Scroll left and right using arrows!</p>
  <div id="con">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div> 
  </div>
  <script>
    var co = document.getElementById('con');
    // Set scrollLeft to 200px on load
    co.scrollLeft = 200;
  </script>
</body>

</html>

使用 scrollLeft 屬性建立水平滾動

此示例包含一個具有固定寬度和高度的 <a href="/html/html_div_tag.htm" target="_blank"><div>，用於建立水平專案行。定義了用於處理左右滾動的函式。“向左滾動”按鈕單擊時，可見內容將向左移動；“向右滾動”按鈕單擊時，可見內容將向右移動，都使用 scrollLeft 屬性。

<!DOCTYPE html>
<html lang="en">
<head> 
    <style>
      .scroll-container {
        width: 400px; 
        overflow-x: scroll;
        white-space: nowrap;
      }
      .scroll-item {
        display: inline-block;
        width: 200px;
        height: 150px;
        margin-right: 10px;
        background-color: #00fff0;
      }
    </style>
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <h2>scrollLeft Property</h2>
    <div class="scroll-container" id="sccon">
      <div class="scroll-item">Item 1</div>
      <div class="scroll-item">Item 2</div>
      <div class="scroll-item">Item 3</div>
      <div class="scroll-item">Item 4</div>
      <div class="scroll-item">Item 5</div>
    </div> 
    
    <button onclick="scrollLeft()">
        Scroll Left
    </button>
    <button onclick="scrollRight()">
        Scroll Right
    </button>
    
    <script>
      function scrollLeft() {
        var con = document.getElementById("sccon");
        con.scrollLeft -= 50;  
      }
    
      function scrollRight() {
        var con = document.getElementById("sccon");
        con.scrollLeft += 50;  
      }
    </script>
</body>

</html>

動態水平滾動控制

此程式碼示例包含一個具有固定寬度和水平捲軸的可滾動容器。它包含一個函式，用於將容器滾動到開頭和結尾，並動態更新滾動位置。

<!DOCTYPE html>
<html lang="en">
<head>  
  <style>
    #scroll {
      width: 300px; 
      overflow-x: scroll;
      white-space: nowrap;  
      border: 1px solid #bbb;
    }
    .box {
      display: inline-block;
      width: 100px; 
      margin: 10px;
      background-color: #f0fff0;
      text-align: center;
      line-height: 100px; 
    }
    #scrollInfo { 
      font-weight: bold;
    }
  </style>
</head>

<body>
  <h1>HTML - DOM Element</h1>
  <h2>scrollLeft property</h2>
  <div id="scroll">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div> 
  </div>

  <div id="scInfo">Scroll Left: 0</div>

  <div>
    <button onclick="scrollToStart()">
      Scroll to Start
    </button>
    <button onclick="scrollToEnd()">
      Scroll to End
    </button>
  </div>

  <script>
    var scd=document.getElementById('scroll');
    var sInfo=document.getElementById('scInfo');

    function updateScrollInfo() {
      sInfo.textContent = 
      'Scroll Left: ' + scd.scrollLeft;
    }

    function scrollToStart() {
      scd.scrollLeft = 0;
      updateScrollInfo();
    }

    function scrollToEnd() {
      scd.scrollLeft = 
      scd.scrollWidth - scd.clientWidth;
      updateScrollInfo();
    }

    // Update scroll info initially
    updateScrollInfo();

    // Update scroll info on scroll
    scd.addEventListener
      ('scroll',updateScrollInfo);
  </script>
</body>

</html>

使用輸入進行向左滾動

此示例演示如何使用 scrollLeft 屬性在固定寬度容器內啟用互動式水平滾動。使用者可以在輸入欄位中輸入畫素值，然後單擊按鈕，使容器向左滾動該數量的畫素。

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    #container {
      width: 300px;
      overflow-x: scroll;
      white-space: nowrap;
      border: 1px solid #ccc;
    }
    .box {
      display: inline-block;
      width: 100px;
      height: 100px;
      margin: 10px;
      background-color: #f9f0f9;
      text-align: center;
      line-height: 100px;
    }
  </style>
</head>

<body>
  <div id="container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
  </div>
  <div>
    <label for="scrollAmount">
    	Scroll Left by:
    </label>
    <input type="number" id="scrollAmount"value="50">
    <button onclick="scrollLeftByAmount()">
    	Scroll
    </button>
  </div>

  <script>
    var container = document.getElementById
    ('container');
    var scrollAmountInput = 
    document.getElementById('scrollAmount');
    
    function scrollLeftByAmount() {
      var amount = parseInt
      (scrollAmountInput.value, 10) || 0;
      container.scrollLeft -= amount;
    }
  </script>
</body>

</html>

帶有滾動位置跟蹤器的水平可滾動容器

此示例演示如何使用 CSS 建立水平可滾動容器，並使用 scrollLeft 屬性動態跟蹤滾動位置。以下程式碼包含一個具有固定寬度的 <div> 元素，以啟用水平滾動。

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    #con {
      width: 300px;
      overflow-x: scroll;
      white-space: nowrap;
      border: 1px solid black;
    }
    .box {
      display: inline-block;
      width: 100px; 
      margin: 10px;
      background-color: #fff0ff;
      text-align: center;
      line-height: 100px;
    }
  </style>
</head>

<body>
  <h1>HTML - DOM Element</h1>
  <h2>scrollLeft property</h2>
  <p>scroll to get the real-time pixel value..</p>
  <div id="con">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
  </div>
  <div id="scrI">Scroll Left: 0</div>
  <script>
    var ct= document.getElementById('con');
    var scrI = document.getElementById('scrI');
    
    // Update scroll info on scroll
    ct.addEventListener('scroll', function(){
      scrI.textContent = 'Scroll Left: ' 
      + ct.scrollLeft;
    });
  </script>
</body>

</html>

支援的瀏覽器

屬性
scrollLeft	是	是	是	是	是

html_dom_element_reference.htm

列印頁面