Potrzebuje przerobić ten skrypt, https://codepen.io/Pratik-SPEC/pen/NLPQEm
Niestety nie mam wystarczajaco umiejetnosci aby zrobić to samemu. Dlatego zgłaszam się o pomoc tutaj jeżeli ktoś byłby chętny.
Potrzebuje żeby przewijał się on w nieskończoność ale z pazuza np 5 sec i znowuż się przewija 5 sec i znowuż się przewija.... itd.. Plus dodatkowo onmouseover że jak ktoś najedzie myszką to zatrzymuję się w miejscu.
Tak jak tutaj u góry podałem div jest z treścią overflow czyli ma być ten pasek przewijania z boku takie jest zamierzenie.
- Rejestracja:prawie 3 lata
- Ostatnio:4 miesiące
- Postów:18
0
0
Co znaczy "przewija w nieskończoność"?
Treść ma być dodawana na bieżąco? Czy może ma się przewijać na początek, gdy dojdzie do końca tekstu?
Kiedy ma być pauza - po każdym "ekranie" czy może jak dojdzie do końca?
- Rejestracja:około 6 lat
- Ostatnio:23 minuty
1
ten kod już ma wszystko to co chcesz - warunek na powtarzanie (// If condition to set repeat) i pauzę (1200)
Po prostu zamień count < 2 na true i 1200 na 5000.
Żeby dodać stop na onmouseover i nie przerabiać całego kodu to możesz dodać tę linijkę do kodu:
if (!objDiv.matches(':hover'))
objDiv.scrollTop = objDiv.scrollTop + 1;
Ogólnie kod nie jest najlepszy i ma jakieś magiczne liczby i miga na starcie ale jak ci pasuje to ok. ChatGPT zapewne napisze ci lepszy
edytowany 1x, ostatnio: obscurity
- Rejestracja:prawie 3 lata
- Ostatnio:4 miesiące
- Postów:18
0
Dziekuje @obscurity tylko nie działa bo wyjaśniajać też @cerrato w nieskończoność znaczy schodzi w dół i do góry i od nowa w dół żaden nowy kontent się nie dodaje.
Nie działa zmieniłem na true i 5000 teraz odczekuje 5 sec na dole i idzie do góry ale nadal nie odtwarza sie ponownie cały czas (że idzie w dół i do góry potem w nieskończoność)
- Rejestracja:ponad 16 lat
- Ostatnio:około 2 miesiące
0
Sprawdź to:
const pause = (m) => { return new Promise(resolve => setTimeout(() => { resolve(); }, m)) };
async function pageScroll() {
const scroll_text = document.getElementById("data");
if (!scroll_text.matches(':hover'))
scroll_text.scrollTop += 1;
if ((scroll_text.scrollTop + scroll_text.clientHeight) >= scroll_text.scrollHeight) {
await pause(5000);
scroll_text.scrollTop = 0;
await pause(1000);
}
setTimeout(pageScroll, 100);
}
pageScroll();
<style>
.scroll-text {/* dodatkowy kod css do tego https://codepen.io/Pratik-SPEC/pen/NLPQEm */
overflow-y: hidden;
scroll-behavior: smooth;
}
</style>
<div class="scroll-blk">
<div class="scroll-text" id="data">
<h4>What is Lorem Ipsum?</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<h4>Where does it come from?</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="info-text">
Full Prescribing Information
</div>
</div>
<script>
const pause = (m) => { return new Promise(resolve => setTimeout(() => { resolve(); }, m)) };
async function pageScroll() {
const scroll_text = document.getElementById("data");
if (!scroll_text.matches(':hover'))
scroll_text.scrollTop += 1;
if ((scroll_text.scrollTop + scroll_text.clientHeight) >= scroll_text.scrollHeight) {
await pause(5000);
scroll_text.scrollTop = 0;
await pause(1000);
}
setTimeout(pageScroll, 100);
}
pageScroll();
</script>