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 = thisconst 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>

情况二:
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>

div内容超出自动滚动相关推荐

【转载】让DIV的滚动条自动滚动到最底部的3种方法
转载自:脚本之家 → 网络编程 → JavaScript → javascript技巧 → 让DIV的滚动条自动滚动到最底部的3种方法(推荐) http://www.jb51.net/article ...
el-table表格固定表头与合计行，内容部分自动滚动展示
这里有个需求要在点击文字弹出的弹窗中展示明细数据,要求用表格展示数据,并且不做分页,表头与末尾合计行固定,中间内容部分滑动展示且可以自动滚动.下边贴代码 html部分,因为我这里有多个不同的表格展示 ...
css 设置表格/div内容超出时不显示全部，当内容超出时鼠标悬浮显示内容
css样式: td>div{width:100emoverflow: hidden; text-overflow:ellipsis;white-space: nowrap; } jQuery: ...
css设置不显示超出内容_显示...,css设置内容超出后显示省略号
1.使用overflow: hidden把超出的内容进行隐藏: 2.然后使用white-space: nowrap设置内容不换行: 3.最后使用text-overflow: ellipsis设置超出内 ...
html内容超出不自动滚动,css设置div滚动条内容不超过就不显示
css设置div滚动条内容不超过就不显示实现内容不超出就不显示滚动条的效果,可以设置div的css样式为overflow:auto,当overflow取值为auto时,如果内容被修剪,则浏览器会显示 ...
实现当UILable的内容超出其范围后自动滚动效果
本文主要介绍 [当UILabel的内容超出其自身的宽度范围后,进行互动展示的效果],我们先来看一下Demo的效果图. 实际实现起来并不十分繁杂,在这里,为了开发的效率,我们使用了一个已经封装好的UIL ...
控制DIV内容滚动的方法，实现不用拖滚动条就可以看到最新消息
三种控制DIV内容滚动的方法: 本人qq群也有许多的技术文档,希望可以为你提供一些帮助(非技术的勿加). QQ群: 281442983 (点击链接加入群:http://jq.qq.com/?_wv ...
内容超出div,设置滚动条
当内容超出div时,自动出现滚动条的条件:1.内容必须在div中:2.div要设置宽高:3.overflow 设置 auto: 备注: 1.overflow:auto;当内容宽度超出div宽度,或者内 ...
div横向超出可滚动，自动添加滚动条，自定义滚动条样式，
先看一下最终的效果图吧: 第一种文字内容超出显示滚动条: 父盒子:横向超出滚动:overflow-x: scroll; .box {width: 100%;box-sizing: border-box ...

div内容超出自动滚动

div内容超出自动滚动相关推荐

最新文章

热门文章