<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>autoScroll</title>
</head>
<style>
.parent {
width: 300px;
height: 200px;
margin: 0 auto;
background: #242424;
overflow-y: scroll;
}
/*设置的子盒子高度大于父盒子,产生溢出效果*/
.child {
height: auto;
}
.child li {
height: 50px;
margin: 2px 0;
background: #009678;
}
</style>
<body>
<div id="parent" class="parent">
<div id="child1" class="child">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</div>
<div id="child2" class="child"></div>
</div>
<script type="text/javascript">
(function () {
var parent = document.getElementById('parent');
var child1 = document.getElementById('child1');
var child2 = document.getElementById('child2');
child2.innerHTML = child1.innerHTML;
setInterval(function () {
if (parent.scrollTop >= child1.scrollHeight) {
parent.scrollTop = 0;
} else {
let item = parent.scrollTop;
parent.scrollTop++;
if (item == parent.scrollTop) {
parent.scrollTop = 0;
}
}
}, 20);
})()
</script>
</body>
</html>
实现表格等overflow:scroll 情况下的循环轮播
vue 样例实现表格的自动循环轮播以及鼠标移上去的轮播停止
<template>
<div class="topoCaltable" :style="{ width: '100%', height: '100%' }">
<div class="screen_right_bottom_top">告警信息列表</div>
<div class="table_content">
<div class="backround">
<div class="toptitle">
<div class="item">设备编号</div>
<div class="item">报警时间</div>
<div class="item">状态</div>
<div class="item">产品名称</div>
</div>
<div
class="warning_parent"
@mouseover="handlemouseOver"
@mouseleave="handlemouseLeave"
>
<table cellpadding="0" cellspacing="0" class="table_warning">
<tr
v-for="(item, index) in warnList"
:key="index"
class="table-item"
>
<td class="table-item-content">{{ item.devaddr }}</td>
<td class="table-item-content">
{{ utc2beijing(item.createdAt) }}
</td>
<td class="table-item-content">
<el-tag
v-if="item.content.alertstatus"
size="medium"
type="warning"
>
告警产生
</el-tag>
<el-tag v-else size="medium" type="success">告警恢复</el-tag>
</td>
<td class="table-item-content">{{ item.productname }}</td>
</tr>
</table>
</div>
<!-- </vue-seamless-scroll> -->
</div>
</div>
</div>
</template>
<script>
export default {
name: "TopoCaltable",
props: {
comp: {
type: Object,
default: () => ({
type: "line",
width: 400,
hieght: 72,
}),
},
},
data() {
return {
listData: [],
warnList: [],
timer: {},
};
},
created() {
},
mounted() {
this.scroll();
},
methods: {
scroll() {
let _this = this;
var parent = document.getElementsByClassName("warning_parent")[0];
var child1 = document.getElementsByClassName("table_warning")[0];
clearInterval(this.timer);
this.timer[_this.comp.id] = setInterval(function () {
// console.log("滚动", parent.scrollTop, child1.scrollHeight);
if (parent.scrollTop >= child1.scrollHeight) {
parent.scrollTop = 0;
} else {
let item = parent.scrollTop;
parent.scrollTop++;
if (item == parent.scrollTop) {
parent.scrollTop = 0;
}
}
}, 20);
},
handlemouseOver() {
clearInterval(this.timer[this.comp.id]);
},
handlemouseLeave() {
this.scroll();
},
},
};
</script>
<style scoped>
/*里面的代码可以根据自己需求去进行更改*/
/* 设置滚动条的样式 */
::-webkit-scrollbar {
width: 12px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
border-radius: 10px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
border-radius: 10px;
background: #0e1024;
-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
}
/* ::-webkit-scrollbar-thumb:window-inactive {
background-color: #2472ea;
} */
</style>
<style lang="scss" scoped>
.topoCaltable {
background: url("../../../assets/bg/bg_warning.png") no-repeat;
background-size: 100% 100%;
position: relative;
.screen_right_bottom_top {
background: url("../../../assets/bg/bg_title.png") no-repeat;
background-size: 100% 100%;
width: 100%;
height: 40px;
line-height: 40px;
padding-left: 50px;
font-weight: bold;
color: #fff;
}
.table_content {
// position: absolute;
width: 96%;
height: calc(100% - 50px);
margin-top: 2px;
margin-left: 2%;
background-color: #0b2266;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
overflow: hidden;
::v-deep .toptitle {
background-color: #071753;
width: 100%;
display: flex;
// background-color: gainsboro;
// margin-bottom: 10px;
border: 0.2px solid #fff;
// background-color: transparent;
// color: white;
}
.item {
width: 25%;
padding: 15px 0;
// border-right: 2px solid gainsboro;
text-align: center;
}
.backround {
width: 100%;
height: 100%;
// background-color: #001833;
}
.warning_parent {
height: calc(100% - 50px);
display: flex;
overflow-y: scroll;
}
.table_warning {
height: 80%;
width: 101.8%;
display: flex;
// overflow-y: auto;
flex-direction: column;
// border-left: 0.2px solid #ccc;
// border-bottom: 0.2px solid #ccc;
// border-right: 0.2px solid #ccc;
.table-item:nth-child(2n) {
background-color: #0b1b57;
}
.table-item:nth-child(2n + 1) {
background-color: #071753;
}
.table-item {
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
// border-bottom: 0.1px solid #ccc;
// border-top: 0.1px solid #ccc;
width: 100%;
// border-bottom: 0.2px solid #fff;
.table-item-content {
flex: 1;
height: 100%;
// border: 0.1px solid #fff;
text-align: center;
padding: 5px;
}
}
}
/* 表格内背景颜色 */
::v-deep .el-table .tableRowClassName:nth-child(2n) {
background-color: #001833 !important;
// border: 0.1px solid #fff !important;
}
::v-deep .el-table .tableRowClassName:nth-child(2n + 1) {
background-color: #08223f !important;
// border: 0.1px solid #fff !important;
}
::v-deep .el-table {
border-collapse: collapse;
}
// ::v-deep .el-table th,
// // ::v-deep .el-table tr,
// ::v-deep .el-table td {
// border-collapse: collapse;
// color: #fff !important;
// // border: 0.2px solid #fff !important;
// // border-collapse: collapse !important;
// }
// 原文链接:https://blog.csdn.net/weixin_47769562/article/details/119945415
.seamless-warp {
overflow: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000; /* Other transform properties here */
}
// ::v-deep .el-table--enable-row-hover .el-table__body tr:hover {
// color: #000 !important;
// }
// ::v-deep .el-table .tableRowClassName:hover {
// color: #000 !important;
// }
::v-deep .el-table .cell {
text-align: center;
color: #fff;
}
}
}
</style>