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

Question

目前我无法把头脑包裹起来，可能非常简单。

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

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

在内部有多个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()就像document.querySelector('.text-image-item')就足够了，因为它会返回第一个具有该类名的元素。

尝试：

 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>