Question

有一个div元素绝对位于相对容器中。它最初位于四个按钮之一。根据单击的按钮，我用JS计算按钮的x坐标，并移动该按钮下面的div元素。这是我的标记和JS：

<div id='container-of-four-buttons' style="width: 100%; position: relative;">
 <button>Foo</button>
 <button>Buzz</button>
 <button>Foo</button>
 <button>Buzz</button>
</div>

<div id='followAlong-container' style="width: 100%; position: relative;">
<div class='followAlong-div' style="position:absolute; width: 15px; height: 13px;">Some stylized arrow</div>
</div>

var initialDiv = /* selected the second button to be initial */
var followAlongDiv = document.querySelector('followAlong-div');
var buttons = document.querySelectorAll('button');

followAlongDiv.style.left = initialDiv + 89 + 'px';


buttons.forEach(function(btn) {
  btn.addEventListener('click', function() {
    let xCoord = 0;
    xCoord += (div.offsetLeft - div.scrollLeft + div.clientLeft);
    followAlongDiv.style.left = xPos + 17 + 'px';
  });
});

但是，如果我调整浏览器的大小，则四个按钮元素会相互缩小，但followAlongDiv会保持在同一位置，因为它绝对位于相对容器中。

如何计算浏览器调整大小的宽度并更新followAlongDiv的位置？

我将使用window.addEventListener（＆＃39; resize＆＃39;，updatePosition），但我不知道如何处理updatePosition函数的制定。

Answer 1

首先，' followAlong-div '是一个类（在className之前需要'。'）：

var followAlongDiv = document.querySelector（'。followAlong-div'）;

其次，我不明白为什么你有这条线：

xCoord + =（div.offsetLeft - div.scrollLeft + div.clientLeft）;

只需要调整大小：

window.onresize = ()=>{
          var xCoord = 0;
          xCoord += (selectedButton.offsetLeft);
          followAlongDiv.style.left = xCoord + 'px';

}

根据您的代码，我认为这就是您想要的：https://jsfiddle.net/vua4eLhc/

希望它有所帮助！

在调整大小和更新元素位置时检测浏览器的宽度变化

1 个答案: