Блог

Главная - Вопросы по программированию - Показывать div, только если другой div имеет прокрутку

Показывать div, только если другой div имеет прокрутку

#javascript

#javascript

Вопрос:

У меня проблема со скриптом (я новичок в JS, уровень 0), и я хотел бы ее решить.

Вопрос: Возможно ли с помощью JS определить, вызвал ли переполнение div с фиксированными измерениями (340 пикселей x 120 пикселей), когда содержимое превышает фиксированную высоту …?

Мне нужно обнаружить переполнение, только если оно активно, и если это правда, показать скрытый div.

СМОТРИТЕ ЖИВУЮ ДЕМОНСТРАЦИЮ (jsfiddle)

Я пытался добавить скрипт, но это изобретение, которое не работает…

Заранее спасибо!

 var displaced = document.getElementsById('flux')[0];
if (displaced.scrollHeight > displaced.offsetHeight) {

  document.getElementById("show").style.display = "block";
}  
 <div id="container">

  <div id="flux">

    <div id="show">Hello!</div>

    Lorem ipsum dolor sit amet <br> Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor penatibus <br> Phasellus consequat Vivamus dui lacinia <br><br>

    <!--
        Ornare nonummy laoreet lacus Donec <br>
        Ut ut libero Curabitur id <br>
        Dui pretium hendrerit sapien Pellentesque <br>
        Lorem ipsum dolor sit amet <br>
        Consectetuer augue nibh lacus at <br>
        Pretium Donec felis dolor penatibus <br><br>
        Phasellus consequat Vivamus dui lacinia <br>
        Ornare nonummy laoreet lacus Donec <br>
        Ut ut libero Curabitur id <br>
        Dui pretium hendrerit sapien Pellentesque <br>
        Lorem ipsum dolor sit amet <br>
        Consectetuer augue nibh lacus at <br><br>
        Pretium Donec felis dolor penatibus <br>
        Phasellus consequat Vivamus dui lacinia <br>
        Ornare nonummy laoreet lacus Donec <br>
        Ut ut libero Curabitur id <br><br>
        Dui pretium hendrerit sapien Pellentesque <br>
        -->

  </div>
  <!-- // flux -->

</div>
<!-- // container -->

<div id="note">
  Note: The div "show" (red box) must be display = "none".<br>See CSS line 13.<br><br>And it must be display = "block" only if the scroll on the div #flux is present.
</div>

Комментарии:

1. Соответствующая функция getElementById() и возвращает только один элемент, потому что идентификаторы должны быть уникальными для документа.

2. Спасибо еретической обезьяне (очень хорошее наблюдение для такого ученика, как я). Но это все равно не работает…

3. Обратите внимание, что вы должны раскомментировать свое свойство CSS в соответствии с #show этим набором display: none … Это было бы проще диагностировать, если бы вы также включили CSS в свой вопрос.

Ответ №1:

Изменить var displaced = document.getElementsById('flux')[0]; на document.getElementById('flux') ( getElementById возвращает один элемент, поскольку id элементы должны быть уникальными в документе). Кроме того, display: none в CSS строка 13 была закомментирована.

Вот исправленная ошибка.

Ответ №2:

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

var displaced = document.getElementsById('flux')[0];

Попробуйте изменить его на

var displaced = document.getElementById('flux');

Если вы измените это, демонстрация будет работать отлично

Смотрите исправленную демонстрацию:

http://jsfiddle.net/rmnkj197/