diff --git a/core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue b/core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue
index 32bf982f19..9a6b1e1261 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue
@@ -163,8 +163,10 @@ const handleInnerMouseDown = e => {
     e.stopPropagation()
     e.preventDefault()
   }
-  if (showPosition.value.includes('popEdit') || dvMainStore.mobileInPc) {
+  if (['popEdit', 'preview'].includes(showPosition.value) || dvMainStore.mobileInPc) {
     onClick(e)
+    e.stopPropagation()
+    e.preventDefault()
   }
 }
 
@@ -438,6 +440,7 @@ const showActive = computed(() => props.popActive || (dvMainStore.mobileInPc &&
           :is-edit="false"
           :suffix-id="suffixId"
           :font-family="fontFamily"
+          :active="active"
           @onPointClick="onPointClick"
         />
       </div>
diff --git a/core/core-frontend/src/views/chart/components/views/components/ScrollShadow.vue b/core/core-frontend/src/views/chart/components/views/components/ScrollShadow.vue
new file mode 100644
index 0000000000..9f96d4c61c
--- /dev/null
+++ b/core/core-frontend/src/views/chart/components/views/components/ScrollShadow.vue
@@ -0,0 +1,16 @@
+<script lang="tsx" setup></script>
+
+<template>
+  <div class="scroll-shadow-content">tet</div>
+</template>
+
+<style lang="less" scoped>
+.scroll-shadow-content {
+  z-index: 1;
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  background-color: #ece7e7;
+  opacity: 0.5;
+}
+</style>