Erstellen Sie Social -Media -Stil -Scrollen auf der Long Quarto -Website -Seite ⇐ HTML

[Anonymous]

Ich habe eine Quarto -Website mit einer langen Seite, die viel Scrollen erfordert. Websites wie Social -Media -Feeds oder News -Feeds haben häufig eine Schaltfläche "Klicken, um mehr zu lesen", auf die der Benutzer nach dem Scrollen ein wenig reitet. Anschließend lädt es einen Inhaltssatz und Sie können weiter scrollen, bis Sie zur nächsten Schaltfläche oder zum Ende des Seiteninhalts gelangen, je nachdem, was zuerst kommt. < /P>
Ich bin nicht sehr gut mit der Codierung (Daher war mein Vertrauen in Quarto), konnte dieses Verhalten jedoch im folgenden Beispiel nachahmen. Für eine Seite mit vielen Inhalten ist es jedoch langwierig, jeden Bit des Inhalts in die Schaltfläche zu harten, d. H., d. H. Derzeit steht in jedem {{}} . Weitere "Taste werden so eingerichtet, dass sie automatisch eine bestimmte Länge oder Menge an Inhalten angezeigt werden, anstatt wie in diesem Beispiel unten die Taste in der Taste zu kodieren? Das erscheint leistungsfähiger und flexibler als die aktuelle Lösung. < /P>

Code: Select all

---
title: "Reprex"
format: html
include-in-header:
- text: |

.hidden {
display: none;
}


document.addEventListener('DOMContentLoaded', function() {
const button = document.getElementById('reveal-more');
const sections = document.querySelectorAll('.content-section.hidden');
let currentIndex = 0;

button.addEventListener('click', function() {
if (currentIndex < sections.length) {
sections[currentIndex].classList.remove('hidden');
currentIndex++;
if (currentIndex === sections.length) {
button.style.display = 'none';
}
}
});
});

---

{{< lipsum >}}
{{< lipsum >}}
{{< lipsum >}}

Show More