问一个鼠标滚动事件，这种是怎么实现的？

Question

我看到了deepseek官网的这个按钮，鼠标放上去，还是可以滚动页面，这个是怎么做的？
我研究了一下deepseek官网的支持，而通义千问的却不可以。

我想问的其实是为什么deepseek做到了滚动穿透，在按钮上面执行滑轮操作时，还是可以控制页面滚动。

正常情况下应该是通义千问的那个效果，鼠标滚轮事件被按钮拦截了
https://chat.deepseek.com/

https://tongyi.aliyun.com/qianwen

Answer 1

因为输入文本的容器加了position: sticky属性

position: sticky;
bottom: 0px;

给你写了demo

Answer 2

<template>
  <div class="chat-container">
    <div class="messages-container" ref="messagesContainer" @scroll="handleScroll">
      <!-- 消息列表 -->
    </div>
    
    <button 
      v-if="showScrollButton" 
      class="scroll-to-bottom" 
      @click="scrollToBottom"
    >
      <i class="arrow-down-icon"></i>
      <span v-if="hasNewMessage" class="new-message-indicator"></span>
    </button>
  </div>
</template>

<script setup>
import { ref, onMounted, onUpdated } from 'vue';

const messagesContainer = ref(null);
const showScrollButton = ref(false);
const hasNewMessage = ref(false);
const isAtBottom = ref(true);

const handleScroll = () => {
  if (messagesContainer.value) {
    const { scrollTop, scrollHeight, clientHeight } = messagesContainer.value;
 
    isAtBottom.value = scrollHeight - scrollTop - clientHeight < 20;
    
    // 当滚动超过200px时显示按钮
    showScrollButton.value = scrollTop < scrollHeight - clientHeight - 200;
    
    // 如果滚动到底部，重置新消息指示器
    if (isAtBottom.value) {
      hasNewMessage.value = false;
    }
  }
};

// 滚动到底部
const scrollToBottom = () => {
  if (messagesContainer.value) {
    messagesContainer.value.scrollTo({
      top: messagesContainer.value.scrollHeight,
      behavior: 'smooth'
    });
    hasNewMessage.value = false;
  }
};


const onNewMessage = () => {
  // 如果不在底部，显示新消息指示
  if (!isAtBottom.value) {
    hasNewMessage.value = true;
    showScrollButton.value = true;
  } else {
    // 否则自动滚动到底部
    scrollToBottom();
  }
};

onMounted(() => {
  // 初始滚动到底部
  scrollToBottom();
});

onUpdated(() => {
  /
  if (isAtBottom.value) {
    scrollToBottom();
  } else if (!hasNewMessage.value) {
    
    onNewMessage();
  }
});
</script>

<style scoped>

.new-message-indicator {
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: red;
}
</style>