vue3 滚动区域滚动到原始位置

场景

一页显示40条,超出屏幕滚动,切页面时,滚动到顶部

代码

<template>
	<el-row class="card-scroll">
	  <div class="flex-warp" ref="scrollView">
	    <!-- 内容 -->
	  </div>
 	</el-row>
</template>
<script setup>
const scrollView = ref(null)

scrollView.value.scrollIntoView({ behavior: 'smooth', block: 'start' })
</script>
.card-scroll{
   height: calc(70vh);
  overflow-y: scroll;
  &::-webkit-scrollbar {
    width: 10px; /* 设置滚动条宽度为10像素 */
  }
  &::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,.2); /* 设置滚动条滑块的背景色为#888 */
    border-radius: 5px; /* 设置滚动条滑块的边角半径为5像素 */
  }
}

btw,滚动到页面顶部

window.scrollTo({ top: 0, behavior: 'smooth' })
Vue 3 中使用 `vue3-seamless-scroll` 插件监听滚动事件可以通过自定义属性和事件绑定来实现。以下是详细的说明: ### 实现方式 #### 1. 安装插件 首先需要安装该插件并将其引入到项目中: ```bash npm install vue3-seamless-scroll --save ``` 随后,在项目的入口文件(通常是 `main.js` 或类似的初始化脚本)中全局注册此插件: ```javascript import { createApp } from &#39;vue&#39;; import App from &#39;./App.vue&#39;; import vue3SeamlessScroll from &#39;vue3-seamless-scroll&#39;; const app = createApp(App); app.use(vue3SeamlessScroll); app.mount(&#39;#app&#39;); ``` 以上操作确保了整个应用都可以访问 `vue3-seamless-scroll` 的功能[^3]。 #### 2. 自定义滚动事件处理逻辑 为了监听滚动事件,可以在 `<vue3-seamless-scroll>` 组件上绑定原生 DOM 事件或者利用其内置的 API 来捕获滚动状态的变化。具体来说,可以尝试以下两种方法之一: ##### 方法一:通过 ref 获取组件实例 如果希望更灵活地控制滚动行为,则可以直接获取组件实例并通过其实例方法或暴露的数据进行交互。例如: ```html <template> <div> <vue3-seamless-scroll :list="scrollList" @on-scroll="handleScroll"> <!-- 列表项 --> <div v-for="(item, index) in scrollList" :key="index">{{ item }}</div> </vue3-seamless-scroll> </div> </template> <script> export default { data() { return { scrollList: [&#39;Item 1&#39;, &#39;Item 2&#39;, &#39;Item 3&#39;], }; }, methods: { handleScroll(event) { console.log(&#39;当前滚动位置:&#39;, event.target.scrollTop); // 输出滚动条的位置 } } }; </script> ``` 这里假设 `@on-scroll` 是由插件支持的一个自定义事件名称;如果没有这样的默认机制,则可能需要手动触发它[^4]。 ##### 方法二:扩展原有组件以增加新特性 当现有接口不足以满足需求时,还可以考虑继承原始组件类并添加额外的功能。比如创建一个新的封装版本如下所示: ```typescript // MyCustomScroll.ts import { defineComponent } from &#39;vue&#39;; import { Vue3SeamlessScroll } from &#39;vue3-seamless-scroll&#39;; export default defineComponent({ extends: Vue3SeamlessScroll, emits: [&#39;custom-event&#39;], // 新增发射器声明 mounted() { this.$el.addEventListener(&#39;scroll&#39;, () => { const scrollTopValue = this.$el.scrollTop; this.$emit(&#39;custom-event&#39;, scrollTopValue); // 向外发送数据 }); }, beforeUnmount() { if (this.$el && typeof this.$el.removeEventListener === &#39;function&#39;) { this.$el.removeEventListener(&#39;scroll&#39;, null as any); } } }); ``` 之后就可以像平常一样导入这个新的组件并在模板里正常使用了。 #### 注意事项 尽管上述例子展示了如何捕捉基本的滚动信息,但在实际开发过程中还需要注意性能优化以及跨浏览器兼容性等问题。另外,请确认所使用的库确实提供了相应的钩子函数或开放足够的权限让我们能够介入内部运作流程[^1]。 ```python print("Example Code Block") ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值