div内容超出自动滚动

简介: div内容超出自动滚动

情况一:
1.要求:div内容超出自动滚动,鼠标进入停止滚动
2.效果:请添加图片描述
3.代码(vue)


<template>
  <div class='container'>
      <div ref="contentRef" class="content">
          <div v-for="item in 20" :key="item" class="contentItem">{{item}}</div>
      </div>
  </div>
</template>

<script lang='ts'>
import Vue from 'vue'
export default Vue.extend({
  data () {
    return {
      timer: undefined
    }
  },
  mounted () {
    this.initDiv()
  },
  methods: {
    initDiv () {
      const self = this
      const setInter = function () {
        if (self.$refs.contentRef.scrollTop === self.$refs.contentRef.scrollHeight - self.$refs.contentRef.clientHeight) {
          self.$refs.contentRef.scrollTop = 0
        } else {
          self.$refs.contentRef.scrollTop++
        }
      }
      self.timer && clearInterval(self.timer)
      self.timer = setInterval(setInter, 100)

      this.$refs.contentRef.addEventListener('mouseover', function () {
        self.timer && clearInterval(self.timer)
      })
      this.$refs.contentRef.addEventListener('mouseout', function () {
        self.timer = setInterval(setInter, 100)
      })
    }
  }
})
</script>

<style scoped lang='scss'>
    .content{
        margin-top:100px;
        height: 300px;
        width:300px;
         border:1px solid #f0f0f0;
         overflow: scroll;
        .contentItem{
            margin:10px 0;
            background-color: #f0f0f0;
            line-height:50px;
            text-align: center;
            cursor: pointer;
        }
    }
</style>
AI 代码解读

情况二:
1.要求:只要求div内容超出自动滚动
2.效果图:
请添加图片描述
3.代码


<template>
  <div class='container'>
      <div class="divScroll">
        <div ref="contentRef" class="content">
          <div v-for="item in 10" :key="item" class="contentItem">{{item}}</div>
        </div>
      </div>

  </div>
</template>

<script lang='ts'>
import Vue from 'vue'
export default Vue.extend({
  data () {
    return {
    }
  },
  methods: {
  }
})
</script>

<style scoped lang='scss'>
    .divScroll{
        margin-top:100px;
        height: 300px;
        overflow: scroll;
    }
    .content{
        width:300px;
        border:1px solid #f0f0f0;
        animation: divScroll 4s linear infinite;
        .contentItem{
            margin:10px 0;
            background-color: #f0f0f0;
            line-height:50px;
            text-align: center;
        }
    }
    @keyframes divScroll {
        0%{
            transform:translateY(0px)
        }
        100%{
            transform: translateY(calc(-100% + 300px));
        }
    }
</style>
AI 代码解读
目录
打赏
0
0
0
0
50
分享
相关文章
|
11月前
|
如何对ElementUI、ElementPlus中的Tree树组件进行美化,如增加辅助线、替换展开收起图标、点击节点后文字高亮等效果?本文给你答案!
本文介绍了如何对ElementUI和ElementPlus的Tree树组件进行美化,包括增加辅助线、替换展开收起图标、点击节点后文字高亮等效果,并提供了详细的代码示例和实现效果。
2320 0
如何对ElementUI、ElementPlus中的Tree树组件进行美化,如增加辅助线、替换展开收起图标、点击节点后文字高亮等效果?本文给你答案!
使用css实现文字横向滚动循环
要实现文字横向滚动循环效果,可以使用 CSS 的动画和@keyframes关键帧来创建。下面是一个示例,演示如何使用 CSS 实现文字的横向滚动循环:
837 0
微信小程序框架(一)-全面详解(学习总结---从入门到深化)
微信小程序框架(一)-全面详解(学习总结---从入门到深化)
396 0
IoT小程序在展示中央空调采集数据和实时运行状态上的应用
IoT小程序框架在跨系统平台(AliOS Things、Ubuntu、Linux、MacOS、Window等)方面提供了非常优秀的基础能力,应用的更新升级提供了多种方式,在实际业务开发过程中可以灵活选择。IoT小程序框架通过JSAPI提供了调用系统底层应用的能力,同时提供了自定义JSAPI扩展封装的方法,这样就足够业务开发通过自定义的方式满足特殊的业务需求。 IoT小程序在前端框架能力、应用框架能力、图形框架能力都进行了适配和优化。那么接下来,我们按照其官方步骤搭建开发环境,然后结合中央空调数据采集和状态显示的实际应用场景开发物联网小程序应用。
24125 63
IoT小程序在展示中央空调采集数据和实时运行状态上的应用
Vue3实现列表的拖拽切换
Vue3实现列表的拖拽切换
174 0
如何用Java写一个规范的http接口?
在平常的工作中,经常会遇到要写接口的情况,现在最常用的就是http接口,今天我就介绍一下如何去写一个规范的http接口。
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问