Проще наверное файлы выложить чем макет, т.к. я только добавляю окно справки на уже готовы файлы, а там такой франкштейн, что я когда увидел аж слезы пошли, поэтому приходится извращаться, а с jQuery я слабо умею, не говоря уже о извращениях
+ стилей очень много прописано. Но если нужно будет критично - я добавлю сюда все эти сотни строк
В комментах кода что написал - всё работает кроме этой пресловутого блока <div class="scrollup"></div> при overflow
Название блока рабочее - не значит что скроллить вверх надо по нажатию. Только отображать если родитель имеет .show() и в div.man__text текста больше чем его видно
Посмотреть как выглядят (на фото) эти блоки со стилями можно по ссылке в сообщении при создании темы.
По факту получается структура работы такая:
Жмем блок N (просто отправная точка для работы моих файлов) -> .help__man-window-create, .help__man-inner (первый по очереди в коде) получают display="block" -> нажимаем кнопку Next ( <div class="control__help help__next">Next</div>) -> Текущий .help__man-inner.hide(), следующий .help__man-inner.show(). И так пока не кончатся блоки .help__man-inner в справке.
<div class="man__text"> - по наполнению может быть от 1 до 21 строки текста и его как раз надо отслеживать
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" lang="ru">
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
</head>
<body>
<div class="help__man-wrapper help-modal">
<div class="help__man-window-create d-none"> <!-- Этот блок скрыт при загрузке документа и отображается с помощью jQuery по клику на предопределенный блок -->
<div class="help__man-window-inner">
<section class="help__man-inner d-none"> <!-- Это блоки уже которые идут друг за другом (их много) и отличаются только наполнением текста внутри блока .man__text (ниже по структуре). Тоже изначально все скрыты, но при отображении родителя .help__man-window-create они по очерди отображаются при нажатии кнопки "Next" (.help__next) -->
<div class="help__man-content dflex">
<div class="help__man-col-wrap">
<div class="help__man-col dflex">
<div class="close__cross-wrap dflex">
<div class="minimize-help-wrap">
<div class="min-help-btn dflex" title="Minimize">
<div class="minimize-help"></div>
</div>
</div>
<div class="close__cross">
<img class="close_img" src="images/templates/default/priceblock/delete.png" title="Close help" alt="Close help">
</div>
</div>
<div class="help__man__text-wrap dflex">
<div class="man__text"> <!-- блок который имеет текст, который и надо отслеживать - влазит ли в видимую область или имеет скролл -->
<h3>How to make a single-section window?</h3>
<span>Hello, my Friend!</span>
<p>Let me show you, how easy and fast to draw a window - click "Next" button</p>
</div>
<div class="scrollup"></div> <!-- Блок который должен отображаться, если текст в блоке .man__text имеет overflow, если текст весь влазит в область - блок не показывается -->
<div class="man__control dflex">
<div class="control__help help__next">Next</div>
</div>
</div>
</div>
</div>
<div class="help__man-img">
<img src="images/write-manshout.png" alt="HELPMAN" />
</div>
</div>
</section>
<section class="help__man-inner d-none">
<!-- Подобный блок с другим только текстом в .man__text-->
</section>
</div>
</div>
/div>
<script>
var elSc = document.querySelectorAll('.man__text');
var e = document.querySelectorAll('.scrollup');
for(var i=0; i<elSc.length; i++){
if(elSc[i].clientHeight < elSc[i].offsetHeight){
elSc[i].style.background= 'green'; //тестовое покраски блока в цвет условие для проверки читает ли offsetHeight и .clientHeight
}}
</script>
</body>
</html>
