js 手写轮播列表-鼠标移入暂停滚动且可滚动列表，鼠标移出继滚动的位置继续轮播

鱼缸盖被子了

于 2021-10-17 21:30:34 发布

阅读量1.5k

点赞数 2

文章标签： html5 css html js vue

本文链接：https://blog.youkuaiyun.com/yh8899abc/article/details/120816415

版权

本文介绍了一个项目中遇到的独特需求：列表轮播时，鼠标移入暂停自动滚动并允许手动滚动，鼠标移出后继续自动轮播。作者选择了使用scrollTop属性来实现这一功能，提供了HTML、CSS和JavaScript代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近某个项目中要求的该奇葩的需求，要求列表轮播且鼠标移入暂停轮播且可以手动滚动列表，鼠标移出继续轮播

网上很多插件都满足了基本的轮播需求：轮播，鼠标移入暂停轮播，鼠标移出继续轮播，唯独这个需求没有满足，就是鼠标移入时，还可以手动滚动列表，于是我决定手写一个，

轮播实现的方式有很多种，可以用 transform、top来写，但为了这个特殊的需求，只有用scrollTop来实现了

html部分

// 外层容器
<div class="swiper-wrapper" ref="outterRef">
	// 内容
   <div class="content-container" ref="contentRef" @mouseenter="mouseenterEvent()" @mouseleave="mouseleaveEvent">
        <div class="item-style" ref="itemRef" v-for="item in dataList" :key="item">{
  {item}}</div>
    </div>
</div>

css部分

.swiper-wrapper {
   
    width: 600px;
    height: 1000px;
    border: solid 1px red

最低0.47元/天解锁文章