<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.scrollView{
width: 365px;
/* height: 300px; */
overflow: auto;
}
table{
width:100%;
border-collapse: collapse;
border-spacing: 0;
padding:0;
margin:0;
}
table tr td{
width: 100px;
height: 50px;
border:1px solid red;
text-align: center;
}
.item{
background: green;
width: 1000px;
/* height: 300px; */
}
.scrollView::-webkit-scrollbar {
height: 0px;
/* width: 10px; */
background-color: #eee;
}
.scrollView::-webkit-scrollbar-track {
background-color: #eee;
}
.scrollView::-webkit-scrollbar-thumb {
border-radius: .04rem;
background: #ABAB00;
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
}
.scrollView::-webkit-scrollbar-button {
display: none;
}
</style>
</head>
<body>
<div class="scrollView">
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
let flag = false;
let scrollView = document.querySelector(".scrollView")
let data = []
for (var i = 0; i < 37; i++) {
let item = {
name: `M-${i}`,
stage: ['stage-A'],
value: `${i}`
}
data.push(item)
}
let ele = document.querySelector(".scrollView")
let table = document.createElement("table")
// cellspacing:0;
// cellpadding:0;
for (let j = 0; j < 3; j++) {
let tr = document.createElement("tr")
for (let i = 0; i < data.length; i++) {
let td = document.createElement("td")
if (j == 0) {
td.innerHTML = data[i]['name']
}
if (j == 1) {
td.innerHTML = data[i]['stage'][0]
}
if (j == 2) {
td.innerHTML = data[i]['value']
}
// console.log(td)
tr.appendChild(td)
}
table.appendChild(tr)
}
scrollView.appendChild(table)
ele.scrollLeft = 0;
count = 0;
let timer = setInterval(function() {
console.log(count++);
$(ele).animate({
scrollLeft: "+=365"
}, 1000);
console.log(ele.scrollLeft + 365*2,ele.scrollWidth)
if (Math.floor((ele.scrollLeft + 365*2)) >= ele.scrollWidth) {
$(ele).animate({
scrollLeft: "0"
},0);
}
}
, 2000)
</script>
</html>
横向定时滚动table
最新推荐文章于 2024-07-03 16:16:57 发布