Question

目前，我无法将自己包裹在可能非常简单的东西上。

要获得良好的视图，下面是html。

它有一个滑块，其ID为#sliderScroll，具有固定宽度和溢出滚动。

内部有多个div.text-image-item，这些块的宽度根据用户的屏幕尺寸而变化。

<div id="sliderScroll" class="slider">
   <div class="text-image-item"> Content block 1 </div>
   <div class="text-image-item"> Content block 2 </div>
   <div class="text-image-item"> Content block 3 </div>
   <div class="text-image-item"> Content block 4 </div>
</div>

使用按钮，我希望用户能够水平滚动。我希望滚动像素数量来表示一个块（.text-image-item）的宽度，该宽度根据用户的屏幕大小而波动。

我正在尝试获取此.text-image-item块的宽度，并在scrollLeft函数中使用它。

到目前为止，我得到的是：

const buttonLeft = document.getElementById('scrollLeft');

buttonLeft.onclick = function () {
    var itemWidth = document.getElementsByClassName('text-image-item').offsetWidth;
    console.log(itemWidth);
    document.getElementById('sliderScroll').scrollLeft -= itemWidth;
};

如果我为var itemWidth设置了一个固定数字，则它似乎正在工作。但是我想使用类.text-image-item获得div的宽度。

我添加了console.log，以查看var是否输出正确的数字，但它仅返回undefined。

有人可以指出我正确的方向吗？我不确定这是哪里出了问题，因此我在这里挠头。

Answer 1

document.getElementsByClassName('text-image-item')返回一个NodeList，在这种情况下，它包含4个节点。 NodeList没有offsetWidth。仅单个元素具有宽度。

您将需要选择一个节点并使用其宽度代替。您可以通过选择有效的索引来做到这一点：

document.getElementsByClassName('text-image-item')[0].offsetWidth

有关NodeList的更多信息，请选中MDN

Answer 2

document.getElemenetsByClassName()返回一个NodeList，但是由于它是一个Element，因此您要对其进行操作。另外，看起来您只需要类.text-image-item的一个元素，因此像document.querySelector('.text-image-item')这样使用document.querySelector()就足够了，因为它将返回具有该类名称的第一个元素。

尝试：

const buttonLeft = document.getElementById('scrollLeft');

buttonLeft.onclick = function() {
  let itemWidth = document.querySelector('.text-image-item').offsetWidth;
};

<button id="scrollLeft">Scroll Left</button>
<div id="sliderScroll" class="slider">
  <div class="text-image-item"> Content block 1 </div>
  <div class="text-image-item"> Content block 2 </div>
  <div class="text-image-item"> Content block 3 </div>
  <div class="text-image-item"> Content block 4 </div>
</div>

Answer 3

可以将滚动中的元素带到当前元素，并求和它们的宽度。然后，您可以使用它来设置滚动宽度。这样，您可以拥有任意宽度的元素，并且仍然可以找到所需的元素。

const sumByFunction = f => (p, c) => p + f(c);
const getOffsetWidth = element => element.offsetWidth;

const querySelector = element =>
  selector =>
    Array.from(element.querySelectorAll(selector))

const sumOffsetWidths = sumByFunction(getOffsetWidth)

const scrollNext = (element) => {
  let currentScroll = 0;
  const selector = querySelector(element);
  
  return () => {
    currentScroll++;
    const scrollTarget = selector('.text-image-item')
      .slice(0, currentScroll)
      .reduce(sumOffsetWidths, 0)
      
    element.scrollLeft = scrollTarget;
  }
};

document
  .getElementById('scroller')
  .onclick = scrollNext(document.getElementById('sliderScroll'));

#sliderScroll {
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
}

.text-image-item {
  border: solid 2px rgba(20, 20, 30, 0.4);
  display: inline-block;
  width: 70vw;
}

#scroller {
  position: fixed;
  left: 0;
  top: 20vh;
}

<div id="sliderScroll" class="slider">
   <div class="text-image-item"> Content block 1 </div>
   <div class="text-image-item" style="width: 2000px; background-color: rgba(50, 100, 200, 0.4);"> Content block 2 </div>
   <div class="text-image-item"> Content block 3 </div>
   <div class="text-image-item"> Content block 4 </div>
</div>
<button id="scroller">Scroll next</button>

纯js。获取元素的宽度并在滚动中使用它

3 个答案: