Определить расстояние до верхнего края контейнера с overflow scroll

Question

Определить расстояние до верхнего края контейнера с overflow scroll

Рейтинг: 0Ответов: 1Опубликовано: 01.07.2023

Есть некий контейнер со списком элементов. К контейнеру подключен плагин simplebar. Задача: при клике на элемент надо получить расстояние от верхнего края контейнер до элемента в рамках видимой области.

Просто offsetTop даёт расстояние будто ограничения высоты контейнера нет, как и скролла.
clientHeight тоже не помог.
getScrollElement() самого плагина тоже пытался использовать - не помогло.

Хорошо бы как-то зацепиться за родительский контейнер, а не simplebar, потому как последнего может и не быть вовсе.

Задача:
Есть контейнер с элементами, также, на уровне контейнера есть элемент-подсказка.
При клике на элемент, находящийся в контейнере, нужно высчитать его расстояние до верхнего края контейнера, чтобы это расстояние использовать как стиль top у подсказки, чтобы последняя оказалась на уровне элемента.

Закладывать подсказку внутри элемента нельзя.

Код пример:

document.querySelector('.click').addEventListener('click', function() {
  document.querySelector('.container').classList.toggle('open');
})
let sb = new SimpleBar(document.querySelector('.container'), { autoHide: false });

document.querySelectorAll('.item').forEach((item) => {
  item.addEventListener('click', function() {
    
    let posY = item.offsetTop;  // верхний отступ эл-та от родителя
    
    let helper = item.closest('.wrap').querySelector('.helper');
    
    let test = sb.getScrollElement().scrollTop;

    
    helper.style.top = posY + 'px';
  })
})

* {
  box-sizing: border-box;
}
.wrap{
  position: relative;
  max-width: 300px;
  margin: 50px auto;
}
.container {
  width: 100%;
/*   overflow: hidden auto; */
  border: 1px solid #ccc;
  padding: 20px;
}
.container.open {
  max-height: 300px;
}
.item {
  position: relative;
  border: 1px solid black;
  padding: 5px;
  display: none;
  text-align: center;
  width: 100%;
}
.item:nth-child(-n+10) {
  display: flex;
}
/*.item::after {
  content: "TEST";
  position: absolute;
  background: #ccc;
  width: 50px;
  left: -20px;
  z-index: 9999;
}*/
.open .item {
  display: flex;
}
.click {
  margin: 20px auto;
  width: 50px;
  background: #ccc;
  padding: 5px;
}
.info-wrap {
  position: absolute;
  right: 0;
  padding-right: 10px;
}
.info-text {
  display: none;
}
.info-icon {
  padding: 3px;
  background: #ccc;
  border-radius: 50%;
  width: 10px;
  height: 10px;
}
.helper {
  background: #ccc;
  padding: 5px;
  position: absolute;
  right: -30%;
}

<link
  rel="stylesheet"
  href="https://unpkg.com/simplebar@latest/dist/simplebar.css"
/>
<script src="https://unpkg.com/simplebar@latest/dist/simplebar.min.js"></script>
<div class="click">CLICK</div>
<div class="wrap">
  <div class="container">
    <div class="item">ITEM-1
      <div class="info-wrap">
        <div class="info-icon"></div>
        <div class="info-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia molestiae iusto placeat itaque culpa dolorum.</div>
      </div>
    </div>
    <div class="item">ITEM-2</div>
    <div class="item">ITEM-3</div>
    <div class="item">ITEM-4</div>
    <div class="item">ITEM-5</div>
    <div class="item">ITEM-6</div>
    <div class="item">ITEM-7</div>
    <div class="item">ITEM-8</div>
    <div class="item">ITEM-9</div>
    <div class="item">ITEM-10</div>
    <div class="item">ITEM-11</div>
    <div class="item">ITEM-12</div>
    <div class="item">ITEM-13</div>
    <div class="item">ITEM-14</div>
    <div class="item">ITEM-15</div>
    <div class="item">ITEM-16</div>
    <div class="item">ITEM-17</div>
    <div class="item">ITEM-18</div>
    <div class="item">ITEM-19</div>
    <div class="item">ITEM-20</div>
    <div class="item">ITEM-21</div>
    <div class="item">ITEM-22</div>
    <div class="item">ITEM-23</div>
    <div class="item">ITEM-24</div>
    <div class="item">ITEM-25</div>
    <div class="item">ITEM-26</div>
    <div class="item">ITEM-27</div>
    <div class="item">ITEM-28</div>
    <div class="item">ITEM-29</div>
    <div class="item">ITEM-30</div>
    <div class="item">ITEM-31</div>
    <div class="item">ITEM-32</div>
    <div class="item">ITEM-33</div>
    <div class="item">ITEM-34</div>
    <div class="item">ITEM-35</div>
    <div class="item">ITEM-36</div>
    <div class="item">ITEM-37</div>
    <div class="item">ITEM-38</div>
    <div class="item">ITEM-39</div>
    <div class="item">ITEM-40</div>
    <div class="item">ITEM-41</div>
    <div class="item">ITEM-42</div>
    <div class="item">ITEM-43</div>
    <div class="item">ITEM-44</div>
    <div class="item">ITEM-45</div>
    <div class="item">ITEM-46</div>
    <div class="item">ITEM-47</div>
    <div class="item">ITEM-48</div>
    <div class="item">ITEM-49</div>
    <div class="item">ITEM-50</div>
    <div class="item">ITEM-51</div>
    <div class="item">ITEM-52</div>
    <div class="item">ITEM-53</div>
    <div class="item">ITEM-54</div>
    <div class="item">ITEM-55</div>
    <div class="item">ITEM-56</div>
    <div class="item">ITEM-57</div>
    <div class="item">ITEM-58</div>
    <div class="item">ITEM-59</div>
    <div class="item">ITEM-60</div>
    <div class="item">ITEM-61</div>
    <div class="item">ITEM-62</div>
    <div class="item">ITEM-63</div>
    <div class="item">ITEM-64</div>
    <div class="item">ITEM-65</div>
    <div class="item">ITEM-66</div>
    <div class="item">ITEM-67</div>
    <div class="item">ITEM-68</div>
    <div class="item">ITEM-69</div>
    <div class="item">ITEM-70</div>
    <div class="item">ITEM-71</div>
    <div class="item">ITEM-72</div>
    <div class="item">ITEM-73</div>
    <div class="item">ITEM-74</div>
    <div class="item">ITEM-75</div>
    <div class="item">ITEM-76</div>
    <div class="item">ITEM-77</div>
    <div class="item">ITEM-78</div>
    <div class="item">ITEM-79</div>
    <div class="item">ITEM-80</div>
    <div class="item">ITEM-81</div>
    <div class="item">ITEM-82</div>
    <div class="item">ITEM-83</div>
    <div class="item">ITEM-84</div>
    <div class="item">ITEM-85</div>
    <div class="item">ITEM-86</div>
    <div class="item">ITEM-87</div>
    <div class="item">ITEM-88</div>
    <div class="item">ITEM-89</div>
    <div class="item">ITEM-90</div>
    <div class="item">ITEM-91</div>
    <div class="item">ITEM-92</div>
    <div class="item">ITEM-93</div>
    <div class="item">ITEM-94</div>
    <div class="item">ITEM-95</div>
    <div class="item">ITEM-96</div>
    <div class="item">ITEM-97</div>
    <div class="item">ITEM-98</div>
    <div class="item">ITEM-99</div>
    <div class="item">ITEM-100</div>
  </div>
  <div class="helper">Lorem, ipsum.</div>
</div>

javascript

Источник: Stack Overflow на русском

Answer 1

▲ 0Принят

Если я правильно понял задачу, нужно изменить строку

...
helper.style.top = posY + 'px';
...

на это

...
helper.style.top = (posY - test) + 'px';
...

или так (+2 высота border'а)

...
helper.style.top = ((posY - test) + 2) + 'px';
...

Определить расстояние до верхнего края контейнера с overflow scroll

Ответы