Рассчитать общее scrollTop и scrollLeft элемента - PullRequest
Новая
       16

Рассчитать общее scrollTop и scrollLeft элемента

1 голос
/ 25 июня 2019

Я хочу отобразить всплывающую подсказку при наведении на элемент. Подсказка имеет , чтобы быть позиция: фиксированная; z: index: 1 или он не будет отображаться над другими панелями в программном обеспечении, которое я использую. Проблема в том, что при позиции position: fixed, если на странице активны какие-либо свитки, подсказка не отображается в правильном месте относительно моего исходного элемента.

Я попытался вычислить количество прокрутки для одного из родителей моего элемента и противостоять этому при позиционировании моего элемента с помощью JQuery: 

$( '.tooltipContainer' ).mouseenter( function(){
	var scrollX = $('.elementWithScrollBar').scrollLeft();
	var scrollY = $('.elementWithScrollBar').scrollTop();
	$( '.tooltip' ).css({
    'margin-left':'-=' + scrollX,
    'margin-top':'-=' + scrollY
  });
});
$( '.tooltipContainer' ).mouseleave( function(){
	var scrollX = $('.elementWithScrollBar').scrollLeft();
	var scrollY = $('.elementWithScrollBar').scrollTop();
	$( '.tooltip' ).removeAttr('style');
});
.elementWithScrollBar {
  background-color: gray;
	height: 100px;
	margin: 30px;
	overflow: scroll;
	width: 400px;
}
.tooltipContainer {
	display: inline-block;
  font-size: 50px;
	position: relative;
	vertical-align: top;
	width: 500px;
}
.tooltip {
	box-sizing: border-box;
	background-color: #FFFFFF;
	color: #000000;
	border-radius: 4px;
	border: 1px solid #CC0000;
	display: none;
	font-family: Arial;
	font-size: 12px;
	font-weight: normal;
	margin-top: 5px;
	padding: 5px;
	position: fixed;
	text-align: center;
	width: 300px;
	z-index: 1;
}
.tooltipContainer:hover .tooltip {
	display: block;
}
.box {
  background-color: white;
  height: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<DIV class="elementWithScrollBar">
  <DIV class="tooltipContainer">
    Hover over me
    <SPAN class="tooltip">
      The tooltip should follow the text
    </SPAN>
  </DIV>
  <DIV class="box">
  </DIV>
</DIV>

Я не уверен, что определение scrollLeft и scrollTop и добавление или вычитание их при mouseenter и mouseleave - лучшее решение моей проблемы, но оно работает в простых ситуациях (любой совет приветствуется).

Моя проблема в том, что у моего элемента много родителей, и все они могут иметь компонент прокрутки. Есть ли способ суммировать все значения scrollTop и scrollLeft для всех родительских элементов, чтобы я мог точно определить, где разместить подсказку?

...