div的水平滾動不適用于scrollLeft-有解無憂

我嘗試使用 scrollLeft 進行水平滾動。我能夠水平對齊 div，但看起來 scrollLeft 功能不起作用。

這是我的代碼：

function myFunction() {
  var elmnt = document.getElementById("myDIV");
  elmnt.scrollLeft  = 50;
}

#myDIV {
  height: 250px;
  width: auto;
  display:inline-flex;
  gap:10px;
  overflow: auto;
}

#content {
  height: 800px;
  width: 200px;
  background-color: coral;
}

<button onclick="myFunction()">Scroll div</button><br><br>

<div id="myDIV">
  <div id="content">
  Some text inside a div element.<br><br>
  Some text inside a div element.
  </div>
    <div id="content">
  Some text inside a div element.<br><br>
  Some text inside a div element.
  </div>
    <div id="content">
  Some text inside a div element.<br><br>
  Some text inside a div element.
  </div>
    <div id="content">
  Some text inside a div element.<br><br>
  Some text inside a div element.
  </div>
    <div id="content">
  Some text inside a div element.<br><br>
  Some text inside a div element.
  </div>
</div>

提前感謝您的幫助！

uj5u.com熱心網友回復：

我在樣式里面應用了white-spaceand樣式；我將屬性設定為遵循^[1]。overflow#myDivwidth220pxscrollLeft

function myFunction() {
  var element = document.getElementById("myDIV");
  element.scrollLeft  = 50;
}

#myDIV {  
  white-space: nowrap;
  overflow: scroll;
  width: 220px;
  height: 250px;
  display: inline-flex;
  gap: 10px;
}
#content {
  height: 800px;
  width: 200px;
  background-color: coral;
}

<button onclick="myFunction()">Scroll div</button><br><br>

<div id="myDIV">
  <div id="content">
  Some text inside a div element.<br><br>
  Some text inside a div element.
  </div>
    <div id="content">
  Some text inside a div element.<br><br>
  Some text inside a div element.
  </div>
    <div id="content">
  Some text inside a div element.<br><br>
  Some text inside a div element.
  </div>
    <div id="content">
  Some text inside a div element.<br><br>
  Some text inside a div element.
  </div>
    <div id="content">
  Some text inside a div element.<br><br>
  Some text inside a div element.
  </div>
</div>

^{1 - JavaScript element.scrollLeft 不作業}

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/418602.html

標籤：

上一篇：如何使用gsap創建自定義游標，如awwwards網站

下一篇：如何修復div的高度，以便動態添加資料不會改變它的高度？