Удаление HTML-текста при прокрутке

ProgramBox

Удаление HTML-текста при прокрутке

Post author:admin
Запись опубликована:17 января, 2022
Post category:Вопросы по программированию

#html #scroll

Вопрос:

Я пытаюсь удалить элемент (  ) из своего HTML-кода, как только пользователь прокручивает его вниз, и после первой прокрутки он не вернется, пока не произойдет перезагрузка. Я ничего не смог найти ни здесь, ни в Google по этому поводу, так что помощь была бы очень кстати.

HTML

 <body>
    <div id="scrolltext">
        <p>I go missing when the user scrolls, never to return</p>
    </div>
</body>

Я действительно не знаю, куда идти дальше, я думаю, что потребуется JavaScript или, по крайней мере, какое-то свойство прокрутки CSS.

Я добавлю здесь, что я согласен с использованием комбинации HTML CSS и JS.

1. Вы хотите удалить при прокрутке из DOM без возврата данного в текущем сеансе?

2. HTML и CSS не могут выполнять динамические манипуляции DOM, связанные с прокруткой. JavaScript может.

3. @s.кузнецов Я слышал термин DOM раньше, но не совсем уверен, что он означает (кроме того, что он обозначает объектную модель документа). Я просто хочу, чтобы тег был удален сразу после перемещения полосы прокрутки и никогда не возвращался на страницу до тех пор, пока он не будет перезагружен. Надеюсь, это прояснит ситуацию.

Ответ №1:

Вы можете использовать метод remove() для удаления любого элемента из события DOM внутри окна onscroll .

Тег  будет удален после первого прокрутки и появится снова только после перезагрузки страницы.

 let p_remove = document.querySelector("#scrolltext p");

window.onscroll = function () {
    p_remove.remove();
};

 body {
    height: 5000px;
}

 <body>
    <div id="scrolltext">
        <p>I go missing when the user scrolls, never to return</p>
    </div>
</body>

1. Не я, мне на самом деле больше всего нравится ваш ответ, он написан в коде, который я могу понять, и в нем меньше всего этого. Спасибо!

2. @Greenreader9 Ну, вы должны принять во внимание, что этот ответ пришел на 7 минут позже, чем первый, с тем же принципом — но учит вас плохим практикам (почти как в w3schools) — относительно let вместо const и неаккуратного использования on* обработчиков (вместо правильного addEventListener ). Также это не отсоединяет слушателя от элемента (сделано removeEventListener ). Так много плохих вещей, о которых я тоже думаю, чтобы отказаться.

3. @RokoC. Булян, он все равно будет работать со всеми браузерами, верно? Мне нужен код, который я смогу понять, чтобы вернуться к нему позже (когда я забуду использовать комментарии). Я понимаю, что это значит. Есть ли фрагмент (об этой вещи removeEventListener), который я мог бы добавить, чтобы сделать его лучше или более «правильным»?

4.@RokoC.Булян, я не понимаю, о каком плохом примере ты говоришь. Мой пример довольно хорошо отвечает на вопрос ОП. let и const работайте так же, за исключением того, что вы не можете переопределить const . В этом вся разница. И почему я должен принципиально использовать прослушиватель событий remove для такого простого примера ?! Это мое решение, и я сам буду выбирать, как мне это сделать!

5. @RokoC. Булян, И вполне возможно, что удаление тега  не будет единственной логикой в его проекте при прокрутке событий. Поэтому я не применял прослушиватели событий, а также removeEventListener и addEventListener .

Ответ №2:

HTML и CSS не могут выполнять динамические манипуляции DOM, связанные с прокруткой.
JavaScript может.

 // Get (and cache) the desired Element from the DOM
const EL_scrolltext = document.querySelector("#scrolltext");

// Function to remove the element,
// and remove the expensive scroll listener
const removeScrollText = () => {
  EL_scrolltext.remove();  // Remove element from DOM
  window.removeEventListener("scroll", hideScrollText);
};

// Remove the Element once the user scrolls
window.addEventListener("scroll", removeScrollText);

 body { min-height: 300vh; }

 <div id="scrolltext">
  <p>I go missing when the user scrolls, never to return</p>
</div>

Имейте в виду, что вышесказанное не сработает, если страница не может быть прокручена (не имеет полос прокрутки).

Подробнее: