diff --git a/resources/assets/js/pages/manage/components/ChatInput/emoji.vue b/resources/assets/js/pages/manage/components/ChatInput/emoji.vue
index 1188f4794..9eb92dd61 100644
--- a/resources/assets/js/pages/manage/components/ChatInput/emoji.vue
+++ b/resources/assets/js/pages/manage/components/ChatInput/emoji.vue
@@ -23,19 +23,21 @@
                 </ul>
             </Scrollbar>
         </div>
-        <ul v-if="!onlyEmoji" ref="chatEmojiMenuRef" class="chat-emoji-menu" :style="chatEmojiMenuStyle" @scroll="onHandleScroll">
-            <li v-if="showEmojiMenuScrollLeftBtn" @click="onEmojiMenuScroll('left')" class="left-btn"><i class="taskfont">&#xe72d;</i></li>
-            <li :class="{active: type === 'emosearch'}" @click="type='emosearch'">
-                <i class="taskfont">&#xe6f8;</i>
-            </li>
-            <li :class="{active: type === 'emoji'}" @click="type='emoji'">
-                <span class="no-dark-content">&#128512;</span>
-            </li>
-            <li v-for="item in emoticonData" :class="{active: type === 'emoticon' && emoticonPath == item.path}" @click="onEmoticon(item.path)">
-                <Imgs :title="item.name" :alt="item.name" :src="item.src"/>
-            </li>
-            <li v-if="showEmojiMenuScrollRightBtn" @click="onEmojiMenuScroll('right')" class="right-btn"><i class="taskfont">&#xe733;</i></li>
-        </ul>
+        <div v-if="!onlyEmoji" class="chat-emoji-menu-wrap">
+            <span v-show="showEmojiMenuScrollLeftBtn" class="left-btn" @click="onEmojiMenuScroll('left')" style="position: absolute; left: 0; bottom: 0;"><i class="taskfont">&#xe72d;</i></span>
+            <ul ref="chatEmojiMenuRef" class="chat-emoji-menu" @scroll="onHandleScroll">
+                <li :class="{active: type === 'emosearch'}" @click="type='emosearch'">
+                    <i class="taskfont">&#xe6f8;</i>
+                </li>
+                <li :class="{active: type === 'emoji'}" @click="type='emoji'">
+                    <span class="no-dark-content">&#128512;</span>
+                </li>
+                <li v-for="item in emoticonData" :class="{active: type === 'emoticon' && emoticonPath == item.path}" @click="onEmoticon(item.path)">
+                    <Imgs :title="item.name" :alt="item.name" :src="item.src"/>
+                </li>
+            </ul>
+            <span v-show="showEmojiMenuScrollRightBtn" class="right-btn" @click="onEmojiMenuScroll('right')" style="position: absolute; right: 0; bottom: 0;"><i class="taskfont">&#xe733;</i></span>
+        </div>
     </div>
 </template>
 
@@ -115,19 +117,16 @@ export default {
             }
             return [];
         },
-        chatEmojiMenuStyle() {
-            return {
-                paddingLeft: this.showEmojiMenuScrollLeftBtn ? '34px' : 0,
-                paddingRight: this.showEmojiMenuScrollRightBtn ? '34px' : 0,
-            }
-        },
         showEmojiMenuScrollLeftBtn(){
             return this.emojiMenuScrollLeft > 34
         },
         showEmojiMenuScrollRightBtn(){
             const container = this.$refs['chatEmojiMenuRef'];
-            const liWidth = container?.querySelector('li')?.offsetWidth || 48;
-            return this.emojiMenuScrollLeft < this.emoticonData.length * liWidth - (this.$store.state.windowPortrait ? 34 : 0)
+            if (container) {
+                const liWidth = container?.querySelector('li')?.offsetWidth || 48;
+                return this.emojiMenuScrollLeft < (container.scrollWidth - container.clientWidth - liWidth);
+            }
+            return this.emojiMenuScrollLeft <= 100;
         }
     },
     methods: {
@@ -226,8 +225,11 @@ export default {
         onMonitorWheel() {
             const container = this.$refs['chatEmojiMenuRef'];
             container?.addEventListener("wheel", (event) =>{
-                event.preventDefault();
-                container.scrollLeft = container.scrollLeft + event.deltaY;
+                const isTouchpad = Math.abs(event.deltaY) < 10 && event.deltaMode === 0;
+                if (!isTouchpad) {
+                    event.preventDefault();
+                    container.scrollLeft = container.scrollLeft + event.deltaY;
+                }
             });
         },
 
diff --git a/resources/assets/sass/pages/components/chat-input.scss b/resources/assets/sass/pages/components/chat-input.scss
index 2a4e10239..dae330d00 100755
--- a/resources/assets/sass/pages/components/chat-input.scss
+++ b/resources/assets/sass/pages/components/chat-input.scss
@@ -562,55 +562,64 @@
             }
         }
     }
-    .chat-emoji-menu {
-        width: 376px;
-        height: 40px;
-        line-height: 40px;
-        background-color: #f2f4f7;
-        display: flex;
-        align-items: center;
-        overflow: auto;
 
-        &::-webkit-scrollbar {
-            display: none;
-        }
+    .chat-emoji-menu-wrap {
+        position: relative;
 
-        > li {
-            list-style: none;
-            cursor: pointer;
+        .chat-emoji-menu {
+            width: 376px;
+            height: 40px;
+            line-height: 40px;
+            background-color: #f2f4f7;
             display: flex;
             align-items: center;
-            height: 100%;
+            overflow: auto;
 
-            &.active {
-                background-color: #fff;
+            &::-webkit-scrollbar {
+                display: none;
             }
 
-            > span {
-                padding: 0 13px;
-                font-size: 22px;
-            }
+            > li {
+                list-style: none;
+                cursor: pointer;
+                display: flex;
+                align-items: center;
+                height: 100%;
 
-            > i {
-                width: 48px;
-                font-size: 18px;
-                text-align: center;
-            }
+                &.active {
+                    background-color: #fff;
+                }
 
-            > img {
-                width: 24px;
-                height: 24px;
-                padding: 0 12px;
-                box-sizing: content-box;
+                > span {
+                    padding: 0 13px;
+                    font-size: 22px;
+                }
+
+                > i {
+                    width: 48px;
+                    font-size: 18px;
+                    text-align: center;
+                }
+
+                > img {
+                    width: 24px;
+                    height: 24px;
+                    padding: 0 12px;
+                    box-sizing: content-box;
+                }
             }
         }
 
         .left-btn,.right-btn{
-            position: absolute !important;
-            height: 40px;
+            position: absolute;
+            height: 100%;
             background: #f2f4f7 !important;
             width: 34px;
             z-index: 3;
+            text-align: center;
+            display: flex;
+            align-items: center;
+            justify-content: center;
         }
 
         .left-btn{