forked from potsda.mn/mobilizon
Things commented out which in my opinion are no longer needed 6bcff6d1ae
This commit is contained in:
parent
04e7a2e02d
commit
be8a206b0d
|
@ -19,14 +19,14 @@
|
|||
</div>
|
||||
<slot name="subtitle" />
|
||||
</div>
|
||||
<div class="hidden sm:block" v-show="showScrollLeftButton">
|
||||
<!-- <div class="hidden sm:block" v-show="showScrollLeftButton">
|
||||
<button
|
||||
@click="scrollLeft"
|
||||
class="absolute inset-y-0 my-auto z-10 rounded-full bg-white dark:bg-transparent w-10 h-10 border border-shadowColor -left-5"
|
||||
>
|
||||
<span class=""><</span>
|
||||
</button>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="overflow-hidden">
|
||||
<div
|
||||
class="multi-card-event"
|
||||
|
@ -53,54 +53,54 @@ const emit = defineEmits(["doGeoLoc"]);
|
|||
|
||||
const { t } = useI18n({ useScope: "global" });
|
||||
|
||||
const showScrollRightButton = ref(true);
|
||||
const showScrollLeftButton = ref(false);
|
||||
// const showScrollRightButton = ref(true);
|
||||
// const showScrollLeftButton = ref(false);
|
||||
|
||||
const scrollContainer = ref<any>();
|
||||
// const scrollContainer = ref<any>();
|
||||
|
||||
const scrollHandler = () => {
|
||||
if (scrollContainer.value) {
|
||||
showScrollRightButton.value =
|
||||
scrollContainer.value.scrollLeft <
|
||||
scrollContainer.value.scrollWidth - scrollContainer.value.clientWidth;
|
||||
showScrollLeftButton.value = scrollContainer.value.scrollLeft > 0;
|
||||
}
|
||||
};
|
||||
// const scrollHandler = () => {
|
||||
// if (scrollContainer.value) {
|
||||
// showScrollRightButton.value =
|
||||
// scrollContainer.value.scrollLeft <
|
||||
// scrollContainer.value.scrollWidth - scrollContainer.value.clientWidth;
|
||||
// showScrollLeftButton.value = scrollContainer.value.scrollLeft > 0;
|
||||
// }
|
||||
// };
|
||||
|
||||
const doScroll = (e: Event, left: number) => {
|
||||
e.preventDefault();
|
||||
if (scrollContainer.value) {
|
||||
scrollContainer.value.scrollBy({
|
||||
left,
|
||||
behavior: "smooth",
|
||||
});
|
||||
}
|
||||
};
|
||||
// const doScroll = (e: Event, left: number) => {
|
||||
// e.preventDefault();
|
||||
// if (scrollContainer.value) {
|
||||
// scrollContainer.value.scrollBy({
|
||||
// left,
|
||||
// behavior: "smooth",
|
||||
// });
|
||||
// }
|
||||
// };
|
||||
|
||||
const scrollLeft = (e: Event) => {
|
||||
doScroll(e, -300);
|
||||
};
|
||||
// const scrollLeft = (e: Event) => {
|
||||
// doScroll(e, -300);
|
||||
// };
|
||||
|
||||
const scrollRight = (e: Event) => {
|
||||
doScroll(e, 300);
|
||||
};
|
||||
// const scrollRight = (e: Event) => {
|
||||
// doScroll(e, 300);
|
||||
// };
|
||||
|
||||
const scrollHorizontalToVertical = (evt: WheelEvent) => {
|
||||
evt.deltaY > 0 ? doScroll(evt, 300) : doScroll(evt, -300);
|
||||
};
|
||||
// const scrollHorizontalToVertical = (evt: WheelEvent) => {
|
||||
// evt.deltaY > 0 ? doScroll(evt, 300) : doScroll(evt, -300);
|
||||
// };
|
||||
|
||||
onMounted(async () => {
|
||||
scrollContainer.value.addEventListener("wheel", scrollHorizontalToVertical);
|
||||
});
|
||||
// onMounted(async () => {
|
||||
// scrollContainer.value.addEventListener("wheel", scrollHorizontalToVertical);
|
||||
// });
|
||||
|
||||
onUnmounted(() => {
|
||||
if (scrollContainer.value) {
|
||||
scrollContainer.value.removeEventListener(
|
||||
"wheel",
|
||||
scrollHorizontalToVertical
|
||||
);
|
||||
}
|
||||
});
|
||||
// onUnmounted(() => {
|
||||
// if (scrollContainer.value) {
|
||||
// scrollContainer.value.removeEventListener(
|
||||
// "wheel",
|
||||
// scrollHorizontalToVertical
|
||||
// );
|
||||
// }
|
||||
// });
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
Loading…
Reference in a new issue