tag:help.rocksolidthemes.com,2012-07-23:/discussions/contao/64058-usage-areanavigation-beim-scrollen-zum-nchsten-bereich-scrollenRockSolid Themes: Discussion 2021-02-18T08:18:48Ztag:help.rocksolidthemes.com,2012-07-23:Comment/489825622021-01-20T12:55:34Z2021-01-20T15:02:30ZUsage: Areanavigation: Beim Scrollen zum nächsten Bereich scrollen<div><p>Product: Oneo Contao<br>
Contao Version: Contao 4.10.5</p>
<p>Hallo,</p>
<p>ich wollte fragen, ob es möglich wäre, bei einem leichten Scrollen zum nächsten Bereich zu scrollen. Ähnlich wie auf dieser Webseite: <a href="https://www.elzland-hotel-pfauen.de/">https://www.elzland-hotel-pfauen.de/</a></p>
<p>Schon jetzt danke ich Ihnen für Ihre Antwort und wünsche Ihnen noch einen schönen Tag.</p></div>jan.kouttag:help.rocksolidthemes.com,2012-07-23:Comment/489825622021-01-20T14:39:12Z2021-01-20T14:39:12ZUsage: Areanavigation: Beim Scrollen zum nächsten Bereich scrollen<div><p>Vielen Dank für Ihre Frage.</p>
<p>Ein solcher Effekt lässt sich via CSS realisieren.</p>
<p>Fügen Sie dafür bitte folgenden CSS-Code in die Datei <em>files/oneo/css/custom.css</em> ein:</p>
<pre>
<code>html, body {
scroll-snap-type: y mandatory;
}
.centered-wrapper {
scroll-snap-align: start;
}</code>
</pre></div>RockSolid Themestag:help.rocksolidthemes.com,2012-07-23:Comment/489825622021-01-20T14:59:58Z2021-01-20T14:59:58ZUsage: Areanavigation: Beim Scrollen zum nächsten Bereich scrollen<div><p>Vielen Dank für die schnelle Antwort. Leider funktioniert es noch nicht so richtig.</p>
<p>Siehe <a href="https://dev.hotelotto.com/de/">https://dev.hotelotto.com/de/</a></p></div>jan.kouttag:help.rocksolidthemes.com,2012-07-23:Comment/489825622021-01-20T15:30:42Z2021-01-20T15:30:42ZUsage: Areanavigation: Beim Scrollen zum nächsten Bereich scrollen<div><p>Sie haben auf Ihrer Seite anscheinend das Contao-CSS-Framework aktiviert. Dadurch wird dem gesamten Artikel über die CSS-Klasse <code>.block</code> die Eigenschaft <code>overflow: hidden</code> zugewiesen. Durch diese Eigenschaft wird das Scroll-Snapping der Kind-Elemente deaktiviert.</p></div>RockSolid Themestag:help.rocksolidthemes.com,2012-07-23:Comment/489825622021-01-20T15:45:25Z2021-01-20T15:45:25ZUsage: Areanavigation: Beim Scrollen zum nächsten Bereich scrollen<div><p>Das war es! Vielen Dank für den Hinweis. :-)</p>
<p>Allerdings funktioniert nun der Smootheffekt nicht, wenn man auf die Arenanavigationspunkte klickt.</p></div>jan.kouttag:help.rocksolidthemes.com,2012-07-23:Comment/489825622021-01-21T09:39:42Z2021-01-21T09:39:42ZUsage: Areanavigation: Beim Scrollen zum nächsten Bereich scrollen<div><p>Ersetzen Sie dafür bitte folgenden JavaScript-Code in der Datei <em>files/oneo/js/script.js</em></p>
<pre>
<code>scrollContainer.stop(true).animate(
{
scrollTop: Math.ceil(target.offset().top - (parseFloat(target.css('margin-top')) || 0) - (!mediaQuery || mediaQuery.matches ? 0 : $('.header-navigation').outerHeight() || 0)),
},
{
duration: 300,
easing: 'easeOutCubic',
}
);</code>
</pre>
<p>mit diesen Code-Zeilen:</p>
<pre>
<code>(document.scrollingElement || document.documentElement).scrollTo({
top: Math.ceil(target.offset().top - (parseFloat(target.css('margin-top')) || 0) - (!mediaQuery || mediaQuery.matches ? 0 : $('.header-navigation').outerHeight() || 0)),
behavior: 'smooth',
});</code>
</pre></div>RockSolid Themestag:help.rocksolidthemes.com,2012-07-23:Comment/489825622021-01-21T09:57:24Z2021-01-21T09:57:24ZUsage: Areanavigation: Beim Scrollen zum nächsten Bereich scrollen<div><p>Perfekt. Vielen lieben Dank. Wie immer ein toller Kundenservice.</p></div>jan.kouttag:help.rocksolidthemes.com,2012-07-23:Comment/489825622021-01-22T10:49:56Z2021-01-22T10:49:56ZUsage: Areanavigation: Beim Scrollen zum nächsten Bereich scrollen<div><p>Ich möchte noch nachhacken. Ein Problem besteht leider immer noch. Sobald Footer nach einem centered-wrapper mit 100vh kommt, kann man zum Footer gar nicht runterscrollen. Haben Sie da vielleicht noch eine Idee, was ich da einstellen muss?</p></div>jan.kouttag:help.rocksolidthemes.com,2012-07-23:Comment/489825622021-01-22T11:39:36Z2021-01-22T11:39:36ZUsage: Areanavigation: Beim Scrollen zum nächsten Bereich scrollen<div><p>Für alle Bereiche zu denen gescrollt werden soll, müssen Sie CSS-Eigenschaft <code>scroll-snap-align</code> setzen:</p>
<pre>
<code>#footer {
scroll-snap-align: start;
}</code>
</pre>
<p>Weitere Informationen zu Scroll Snapping finden Sie auch in folgenden Artikel: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap/Basic_concepts">https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap/Basic_concepts</a></p></div>RockSolid Themestag:help.rocksolidthemes.com,2012-07-23:Comment/489825622021-01-22T11:58:11Z2021-01-22T11:58:11ZUsage: Areanavigation: Beim Scrollen zum nächsten Bereich scrollen<div><p>Danke. Das hatte ich auch schon. Allerdings macht es Probleme, wenn da eine Seite ohne areanavigation ist, wie es bei Blog der Fall ist. <a href="https://dev.hotelotto.com/de/blog">https://dev.hotelotto.com/de/blog</a></p></div>jan.kouttag:help.rocksolidthemes.com,2012-07-23:Comment/489825622021-01-22T14:52:57Z2021-01-22T14:52:57ZUsage: Areanavigation: Beim Scrollen zum nächsten Bereich scrollen<div><p>Auf Seiten die nicht aus solchen Scroll-Bereichen bestehen, sollten Sie die Eigenschaft <code>scroll-snap-type</code> für <code>html</code> und <code>body</code> nicht setzen bzw. deaktivieren indem Sie sie auf <code>scroll-snap-type: none</code> einstellen.</p></div>RockSolid Themestag:help.rocksolidthemes.com,2012-07-23:Comment/489825622021-01-31T22:04:58Z2021-01-31T22:04:58ZUsage: Areanavigation: Beim Scrollen zum nächsten Bereich scrollen<div><p>Kann es sein, dass dadurch ein anderes Verhalten blockiert wird?</p>
<p>Siehe <a href="https://help.rocksolidthemes.com/discussions/contao/22081-fehler-tab-navigation-probleme-bei-einbau-eines-formulars#comment_49002315">https://help.rocksolidthemes.com/discussions/contao/22081-fehler-ta...</a></p>
<p>Mein Script dazu:</p>
<pre>
<code>var hashTagActive = "";
$(".header-navigation a").click(function (event) {
if(hashTagActive != this.hash) { //this will prevent if the user click several times the same link to freeze the scroll.
//event.preventDefault();
//calculate destination place
var dest = 0;
if ($(this.hash).offset().top > $(document).height() - $(window).height()) {
dest = $(document).height() - $(window).height();
} else {
dest = $(this.hash).offset().top;
}
//go to destination
$('html,body').animate({
scrollTop: dest
}, 1500, 'swing');
hashTagActive = this.hash;
}
});</code>
</pre></div>jan.kouttag:help.rocksolidthemes.com,2012-07-23:Comment/489825622021-02-01T11:25:50Z2021-02-01T11:25:50ZUsage: Areanavigation: Beim Scrollen zum nächsten Bereich scrollen<div><p>Sie haben den JavaScript-Code anscheinend bereits erfolgreich im „// Smooth scrolling“-Block integriert.</p>
<p>Das Scrolling-Problem lässt sich eventuell lösen indem Sie den Code an den Anfang des Event-Handlers verschieben (vor die Zeile <code>var href = $(this)</code>).</p></div>RockSolid Themestag:help.rocksolidthemes.com,2012-07-23:Comment/489825622021-02-01T11:33:23Z2021-02-01T11:33:39ZUsage: Areanavigation: Beim Scrollen zum nächsten Bereich scrollen<div><p>Vielen Dank für Ihre Antwort.</p>
<p>Nein, den Code habe ich in einer separaten Datei, nicht in der Datei von Ihnen. Wo in Ihrer Datei soll ich ihn also Ihrer Meinung nach einfügen? Und welchen Teil davon?</p></div>jan.kouttag:help.rocksolidthemes.com,2012-07-23:Comment/489825622021-02-01T13:35:41Z2021-02-01T13:35:41ZUsage: Areanavigation: Beim Scrollen zum nächsten Bereich scrollen<div><p>Ich habe den Block für Smoothscrolling wie folgt. Allerdings geht es immer noch nicht.</p>
<pre>
<code>// Smooth scrolling (only if jQuery is available)
(function($) {
if (!$) {
return;
}
if (!$.easing.easeOutCubic) {
$.easing.easeOutCubic = function(p) {
return 1 - Math.pow(1 - p, 3);
};
}
var $window = $(window);
var scrollContainer = $('html,body');
var mediaQuery = window.matchMedia && window.matchMedia('(max-width: 900px)');
$(document.body).on('click', 'a[href*="#"]', function(event) {
var hashTagActive = '';
$('.header-navigation a').click(function(event) {
if (hashTagActive != this.hash) {
//this will prevent if the user click several times the same link to freeze the scroll.
//event.preventDefault();
//calculate destination place
var dest = 0;
if ($(this.hash).offset().top > $(document).height() - $(window).height()) {
dest = $(document).height() - $(window).height();
} else {
dest = $(this.hash).offset().top;
}
//go to destination
$('html,body').animate(
{
scrollTop: dest,
},
1500,
'swing'
);
hashTagActive = this.hash;
}
});
var href = $(this)
.attr('href')
.split('#');
var documentHref = document.location.href.split('#');
if (href[0] && documentHref[0].substr(-href[0].length) !== href[0]) {
return;
}
if (!href[1]) {
return;
}
var target = $('#' + href[1]);
if (!target.length || event.metaKey) {
return;
}
event.preventDefault();
this.blur();
if (window.history && window.history.pushState) {
window.history.pushState('', document.title, window.location.href.split('#')[0] + '#' + target.attr('id'));
} else {
var scroll = {
x: $window.scrollLeft(),
y: $window.scrollTop(),
};
window.location.hash = '#' + target.attr('id');
$window.scrollLeft(scroll.x);
$window.scrollTop(scroll.y);
}
(document.scrollingElement || document.documentElement).scrollTo({
top: Math.ceil(target.offset().top - (parseFloat(target.css('margin-top')) || 0) - (!mediaQuery || mediaQuery.matches ? 0 : $('.header-navigation').outerHeight() || 0)),
behavior: 'smooth',
delay: 200,
duration: 800,
});
(function() {
function triggerEvent(element, eventName) {
var evt = document.createEvent('HTMLEvents');
evt.initEvent(eventName, true, true);
element.dispatchEvent(evt);
}
var link = document.querySelector('.tab-navigation a[href$="' + document.location.hash + '"]');
if (link) {
triggerEvent(link, 'click');
}
})();
});
})(window.jQuery);</code>
</pre></div>jan.kouttag:help.rocksolidthemes.com,2012-07-23:Comment/489825622021-02-02T10:19:15Z2021-02-02T10:19:15ZUsage: Areanavigation: Beim Scrollen zum nächsten Bereich scrollen<div><p>Ihre Frage betrifft eine individuelle Anpassung. In unseren <a href="https://rocksolidthemes.com/support-richtlinien">Support-Richtlinien</a> weisen wir darauf hin, dass wir leider keine Hilfe bei Umbauten leisten können. Dennoch versuchen wir Ihnen, in diesem Fall, im Rahmen unserer Möglichkeiten weiterzuhelfen:</p>
<p>Mit folgendem JavaScript-Code sollte sich der gewünschte Effekt umsetzen lassen:</p>
<pre>
<code> // Smooth scrolling (only if jQuery is available)
(function($) {
if (!$) {
return;
}
if (!$.easing.easeOutCubic) {
$.easing.easeOutCubic = function(p) {
return 1 - Math.pow(1 - p, 3);
};
}
var $window = $(window);
var scrollContainer = $('html,body');
var mediaQuery = window.matchMedia && window.matchMedia('(max-width: 900px)');
$(document.body).on('click', 'a[href*="#"]', function(event) {
var href = $(this)
.attr('href')
.split('#');
var documentHref = document.location.href.split('#');
if (href[0] && documentHref[0].substr(-href[0].length) !== href[0]) {
return;
}
if (!href[1]) {
return;
}
var target = $('#' + href[1]);
if (!target.length || event.metaKey) {
return;
}
var tabLink = document.querySelector('.tab-navigation a[href$="#' + href[1] + '"]');
if (tabLink) {
triggerEvent(tabLink, 'click');
}
event.preventDefault();
this.blur();
if (window.history && window.history.pushState) {
window.history.pushState('', document.title, window.location.href.split('#')[0] + '#' + target.attr('id'));
} else {
var scroll = {
x: $window.scrollLeft(),
y: $window.scrollTop(),
};
window.location.hash = '#' + target.attr('id');
$window.scrollLeft(scroll.x);
$window.scrollTop(scroll.y);
}
(document.scrollingElement || document.documentElement).scrollTo({
top: Math.ceil(target.offset().top - (parseFloat(target.css('margin-top')) || 0)),
behavior: 'smooth',
delay: 200,
duration: 800,
});
});
})(window.jQuery);</code>
</pre>
<p>Der Code-Block <code>$('.header-navigation a').click(function(event) {</code> aus Ihrem Haupt-JavaScript muss dafür noch entfernt werden.</p>
<p>Sollten Sie Unterstützung bei der Anpassung benötigen, stehen Ihnen unsere Partner gerne zur Verfügung. Eine Auswahl an Agenturen und Freelancer finden Sie in unserem Partnernetzwerk: <a href="https://rocksolidthemes.com/de/contao/service/agenturen">https://rocksolidthemes.com/de/contao/service/agenturen</a></p></div>RockSolid Themestag:help.rocksolidthemes.com,2012-07-23:Comment/489825622021-02-02T10:49:11Z2021-02-02T10:49:11ZUsage: Areanavigation: Beim Scrollen zum nächsten Bereich scrollen<div><p>Vielen lieben Dank. Das schätze ich sehr und bin Ihnen sehr dankbar.</p></div>jan.kouttag:help.rocksolidthemes.com,2012-07-23:Comment/489825622021-02-12T17:08:07Z2021-02-12T17:08:37ZUsage: Areanavigation: Beim Scrollen zum nächsten Bereich scrollen<div><p>Hallo,</p>
<p>Ich melde mich nochmals. Leider funktioniert das Scrollen am iPad nicht so richtig. Siehe hotelotto.com. Das schon beim Scrollen und wenn man die Navigationspunkte der Areanavigation anklickt.</p></div>jan.kouttag:help.rocksolidthemes.com,2012-07-23:Comment/489825622021-02-15T08:31:48Z2021-02-15T08:31:48ZUsage: Areanavigation: Beim Scrollen zum nächsten Bereich scrollen<div><p>Das Scroll-Snapping sollte sich im Safari mit folgendem CSS-Code deaktivieren lassen:</p>
<pre>
<code>@supports (-webkit-hyphens:none) {
html, body {
scroll-snap-type: none;
}
}</code>
</pre></div>RockSolid Themestag:help.rocksolidthemes.com,2012-07-23:Comment/489825622021-02-18T06:38:37Z2021-02-18T06:38:37ZUsage: Areanavigation: Beim Scrollen zum nächsten Bereich scrollen<div><p>Das ist zwar schön. Aber ich möchte, dass es da trotzdem funktioniert. Es soll in allen Brownsern funktionieren.</p></div>jan.kout