From 257274c40e4a50a33b2cb212dc998c4e97ee3984 Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <aurora90376@gmail.com>
Date: Wed, 11 Dec 2024 11:50:18 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8=20Improve=20scrolling=20behavior?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/store/index.vue | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/pages/store/index.vue b/src/pages/store/index.vue
index 9f801e122..026236f99 100644
--- a/src/pages/store/index.vue
+++ b/src/pages/store/index.vue
@@ -60,8 +60,10 @@
                     // NOTE: Prevent cropping the last tag button shadow
                     { 'pr-[12px]': index === bookstoreTagButtons.length - 1 },
                   ]"
+                  @dragstart.prevent
                 >
                   <ButtonV2
+                    class="pointer-event-auto"
                     :preset="
                       tag.id === selectedTagId ||
                       (!selectedTagId && tag.id === 'featured')
@@ -1359,10 +1361,12 @@ export default {
     },
     handleTagsContainerScroll() {
       const container = this.$refs.tagsContainer;
+      const tolerance = 2;
 
-      this.isTagsContainerAtStart = container.scrollLeft === 0;
+      this.isTagsContainerAtStart = container.scrollLeft <= 0;
       this.isTagsContainerAtEnd =
-        container.scrollLeft + container.clientWidth >= container.scrollWidth;
+        container.scrollLeft + container.clientWidth >=
+        container.scrollWidth - tolerance;
     },
     scrollTagsContainerLeft() {
       const container = this.$refs.tagsContainer;
@@ -1383,12 +1387,15 @@ export default {
     },
     scrollTagsContainerRight() {
       const container = this.$refs.tagsContainer;
+      const tolerance = 2;
       const remainingScrollLeft =
         container.scrollWidth -
         container.clientWidth -
         container.scrollLeft -
         TAGS_CONTAINER_SCROLL_BY_SIZE;
-      const isNearEnd = remainingScrollLeft < TAGS_CONTAINER_SCROLL_BY_SIZE;
+
+      const isNearEnd =
+        remainingScrollLeft <= TAGS_CONTAINER_SCROLL_BY_SIZE + tolerance;
       if (isNearEnd) {
         container.scrollTo({
           left: container.scrollWidth,