Mobile versionHier ist das aktuelle Verhalten:
Anmerkungen: Es gibt Probleme mit dem Scrollverhalten. Das Scrollen mit dem Mausrad funktioniert ordnungsgemäß, aber das Wischen zum Scrollen funktioniert nicht wie erwartet.
Hier ist der Verweis, den ich in meiner Vorlage nicht reproduzieren kann:
Bemerkungen: Dies hat fast die gleiche Codestruktur wie die Vorlage mit Problem.
Hier sind die relevanten Codeausschnitte:
Code: Select all
[list]
[*][url=#tip-answer-1-11]Consejo # 1/11[/url]
[*][url=#tip-answer-2-11]Consejo # 2/11[/url]
[*][url=#tip-answer-3-11]Consejo # 3/11[/url]
[*][url=#tip-answer-4-11]Consejo # 4/11[/url]
[*][url=#tip-answer-5-11]Consejo # 5/11[/url]
[*][url=#tip-answer-6-11]Consejo # 6/11[/url]
[*][url=#tip-answer-7-11]Consejo # 7/11[/url]
[*][url=#tip-answer-8-11]Consejo # 8/11[/url]
[*][url=#tip-answer-9-11]Consejo # 9/11[/url]
[*][url=#tip-answer-10-11]Consejo # 10/11[/url]
[*][url=#tip-answer-11-11]Consejo # 11/11[/url]
[/list]
Code: Select all
/**
* Place the box inside the container with the class .zld-scrollbar-custom.
* The child box should have an auto height, but .zld-scrollbar-custom should have a defined height.
*/
function ZLDCustomScrollbarsInit() {
$(".zld-scrollbar-custom").each(function (index_scrollbar) {
const scroll_thumb_id = `scroll-thumb-${index_scrollbar}`;
const inner_box = $(this).find(">*").first();
// Both container and inner_box refer to the same element: the first box inside .zld-scrollbar-custom that will scroll.
const container = inner_box;
const zldScrollPanel = $(this);
if (zldScrollPanel.attr("data-initilized") !== "Y") {
// Add the classes of the child box to its parent.
zldScrollPanel.attr("class", `${zldScrollPanel.attr("class")} ${inner_box.attr("class")}`);
inner_box.addClass("scrollable-content");
zldScrollPanel.attr("data-initilized", "Y");
zldScrollPanel.append(`
`);
window[`point-${scroll_thumb_id}`] = { x: 0, y: 0 };
/**
* Using the plugin for dragging (https://interactjs.io/)
*/
interact(`#${scroll_thumb_id}`).draggable({
listeners: {
start(event) {
$("body").addClass("noselect");
$(event.target).addClass("dragged");
},
end(event) {
$("body").removeClass("noselect");
$(event.target).removeClass("dragged");
},
move(event) {
move(event.target, event.dx, event.dy);
},
},
});
/**
* Container is the content box that should have scrollbars.
*/
container.on("mousewheel DOMMouseScroll", function (e) {
// If the parent of the container has the class .not-scrollable, enable standard scrolling.
if (container.parent().is(".not-scrollable")) {
return true;
}
const deltaMovingY = getMaxScrollY() > 200 ? 10 : 100;
const delta =
e.originalEvent.detail !== undefined && e.originalEvent.detail !== 0
? e.originalEvent.detail * -1 // Firefox
: e.originalEvent.wheelDelta; // Chrome
if (delta / 120 > 0) {
move($(`#${scroll_thumb_id}`)[0], 0, 0 - deltaMovingY);
} else {
move($(`#${scroll_thumb_id}`)[0], 0, deltaMovingY);
}
// Prevent window scrolling when hovering over this element.
return false;
});
// Touch event handling
let touchStartY = 0;
container.on("touchstart", function (e) {
touchStartY = e.originalEvent.touches[0].clientY;
});
container.on("touchmove", function (e) {
if (container.parent().is(".not-scrollable")) {
return true;
}
const touchEndY = e.originalEvent.touches[0].clientY;
const deltaMovingY = getMaxScrollY() > 200 ? 10 : 100;
const deltaY = touchStartY - touchEndY; // Determine swipe direction
if (deltaY > 0) {
move($(`#${scroll_thumb_id}`)[0], 0, deltaMovingY); // Scroll down
} else {
move($(`#${scroll_thumb_id}`)[0], 0, -deltaMovingY); // Scroll up
}
touchStartY = touchEndY; // Update for smooth scrolling
e.preventDefault(); // Prevent default scrolling
});
}
const move = function (element, dx, dy) {
const thumb = $(element);
const parentThumb = thumb.parent();
const zldScrollBarPanel = parentThumb.closest(".zld-scrollbar-custom");
const position = window[`point-${scroll_thumb_id}`];
position.y += dy;
if (position.y < 0) {
position.y = 0;
} else if (position.y + thumb.height() > parentThumb.height()) {
position.y = parentThumb.height() - thumb.height();
}
element.style.transform = `translate(${position.x}px, ${position.y}px)`;
const totalFreeSpace = parentThumb.height() - thumb.height();
// When the thumb is larger than the parent, scrolling is not needed.
if (totalFreeSpace {
const parentThumb = $(thumb).parent();
const totalFreeSpace = parentThumb.height() - $(thumb).height();
const maxScroll = container[0].scrollHeight - container[0].clientHeight;
if (totalFreeSpace > 0 && maxScroll > 0) {
const percentScrolled = container.scrollTop() / maxScroll;
position.y = totalFreeSpace * percentScrolled;
}
thumb.style.transform = `translate(${position.x}px, ${position.y}px)`;
});
}
const setScrollbasSize = function () {
// Reset the scrollbar sizes (you can complete this if necessary).
};
// Resetting the scrollbar size.
setScrollbasSize();
// When initializing for the first time or resizing the browser, reset the positions.
if (1) {
move($(`#${scroll_thumb_id}`)[0], 0, 0);
}
// Check if the container contains enough content to enable scrolling.
if (container[0].scrollHeight > container[0].clientHeight) {
container.closest(".zld-scrollbar-custom").removeClass("not-scrollable");
} else {
container.closest(".zld-scrollbar-custom").addClass("not-scrollable");
}
});
}
$(window).on("resize", function () {
ZLDCustomScrollbarsInit();
});
$(window).on("orientationchange", function () {
ZLDCustomScrollbarsInit();
});
$(window).on("load", function () {
ZLDCustomScrollbarsInit();
});
$(document).ready(() => {
// Handle scrollbar initialization for elements that are hidden initially.
window.addEventListener(ON_TRANSITION_TO_SHOW_ENDED, () => {
ZLDCustomScrollbarsInit();
});
});
Was ich suche, ist nicht nur eine Code-Korrektur, sondern eine Anleitung, wie man mit diesem Verhalten im Allgemeinen umgeht. Ich versuche sicherzustellen, dass das vertikale Scrollen auf Mobilgeräten und Tablets korrekt funktioniert, kann aber nicht herausfinden, was die Ursache für das Fehlverhalten des Swipe-to-Scroll-Vorgangs ist.
