Scroll left
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Seamless scrolling scroll left</title>
<style>
* {<!-- -->
margin: 0;
padding: 0;
}
#wrapper {<!-- -->
cursor: pointer;
width: 600px;
height: 200px;
border: 1px solid pink;
overflow: hidden;
display: flex;
margin: auto;
}
.scroll_content {<!-- -->
display: flex;
}
#list,
#list1 {<!-- -->
display: flex;
}
.item {<!-- -->
width: 200px;
height: 200px;
flex-shrink: 0;
}
.item img{<!-- -->
width: 100%;
}
.item:nth-child(odd) {<!-- -->
background: skyblue;
}
.item:nth-child(even) {<!-- -->
background: yellow;
}
</style>
</head>
<body>
<!-- Outer box -->
<div id="wrapper">
<!-- Scroll Box -->
<div id="scroll_content" class="scroll_content">
<!-- List 1 -->
<div id="list">
<div class="item">
<img src="../imgs/city1.png" alt="">
</div>
<div class="item">
<img src="../imgs/city2.png" alt="">
</div>
<div class="item">
<img src="../imgs/city3.png" alt="">
</div>
<div class="item">
<img src="../imgs/city4.png" alt="">
</div>
<div class="item">
<img src="../imgs/city5.png" alt="">
</div>
</div>
<!-- Make a copy -->
<div id="list1">
</div>
</div>
</div>
<script>
window.onload = function () {<!-- -->
var speed = 10;
var tab = document.getElementById("wrapper");
var tab1 = document.getElementById("list");
var tab2 = document.getElementById("list1");
tab2.innerHTML = tab1.innerHTML;
function Marquee() {<!-- -->
if (tab2.offsetWidth - tab.scrollLeft <= 0)
tab.scrollLeft -= tab1.offsetWidth
else {<!-- -->
tab.scrollLeft + + ;
}
}
var MyMar = setInterval(Marquee, speed);
tab.onmouseover = function () {<!-- --> clearInterval(MyMar) };
tab.onmouseout = function () {<!-- --> MyMar = setInterval(Marquee, speed) };
}
</script>
</body>
</html>
Scroll right
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Seamless scroll scroll right</title>
<style>
* {<!-- -->
margin: 0;
padding: 0;
}
#wrapper {<!-- -->
cursor: pointer;
width: 600px;
height: 200px;
border: 1px solid pink;
overflow: hidden;
display: flex;
margin: auto;
}
.scroll_content {<!-- -->
display: flex;
}
#list,
#list1 {<!-- -->
display: flex;
}
.item {<!-- -->
width: 200px;
height: 200px;
flex-shrink: 0;
}
.item img{<!-- -->
width: 100%;
}
.item:nth-child(odd) {<!-- -->
background: skyblue;
}
.item:nth-child(even) {<!-- -->
background: yellow;
}
#list1 .item:last-child {<!-- -->
background: red;
}
</style>
</head>
<body>
<!-- Outer box -->
<div id="wrapper">
<!-- Scroll box -->
<div id="scroll_content" class="scroll_content">
<!-- List 1 -->
<div id="list">
<div class="item">
<img src="../imgs/city1.png" alt="">
</div>
<div class="item">
<img src="../imgs/city2.png" alt="">
</div>
<div class="item">
<img src="../imgs/city3.png" alt="">
</div>
<div class="item">
<img src="../imgs/city4.png" alt="">
</div>
<div class="item">
<img src="../imgs/city5.png" alt="">
</div>
</div>
<!-- Make a copy -->
<div id="list1">
</div>
</div>
</div>
<script>
window.onload = function () {<!-- -->
var speed = 10;
var tab = document.getElementById("wrapper");
var tab1 = document.getElementById("list");
var tab2 = document.getElementById("list1");
tab2.innerHTML = tab1.innerHTML;
function Marquee() {<!-- -->
if (tab.scrollLeft <= 0) {<!-- -->
tab.scrollLeft + = tab2.offsetWidth
}
else {<!-- -->
tab.scrollLeft--;
}
console.log(tab.scrollLeft, tab2.offsetWidth);
}
var MyMar = setInterval(Marquee, speed);
tab.onmouseover = function () {<!-- --> clearInterval(MyMar) };
tab.onmouseout = function () {<!-- --> MyMar = setInterval(Marquee, speed) };
}
</script>
</body>
</html>
Scroll up
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scroll up</title>
<style>
* {<!-- -->
margin: 0;
padding: 0;
}
#wrapper {<!-- -->
width: 200px;
height: 600px;
overflow: hidden;
margin: 10px;
}
.item {<!-- -->
width: 200px;
height: 200px;
}
.item img{<!-- -->
width: 100%;
}
.item:nth-child(odd) {<!-- -->
background: skyblue;
}
.item:nth-child(even) {<!-- -->
background: pink;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="scroll_content">
<div id="list">
<div class="item">
<img src="../imgs/city1.png" alt="">
</div>
<div class="item">
<img src="../imgs/city2.png" alt="">
</div>
<div class="item">
<img src="../imgs/city3.png" alt="">
</div>
<div class="item">
<img src="../imgs/city4.png" alt="">
</div>
<div class="item">
<img src="../imgs/city5.png" alt="">
</div>
</div>
<div id="list1"></div>
</div>
</div>
<script>
var speed = 10; //The larger the number, the slower the speed
var wrapper = document.getElementById("wrapper");
var list = document.getElementById("list");
var list1 = document.getElementById("list1");
list1.innerHTML = list.innerHTML; //Clone list to list1
function Marquee() {<!-- -->
if (list1.offsetTop - wrapper.scrollTop <= 0)
wrapper.scrollTop -= list.offsetHeight
else {<!-- -->
wrapper.scrollTop++
}
}
var MyMar = setInterval(Marquee, speed);
wrapper.onmouseover = function () {<!-- --> clearInterval(MyMar) };
wrapper.onmouseout = function () {<!-- --> MyMar = setInterval(Marquee, speed) };
</script>
</body>
</html>
Scroll down
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scroll down</title>
<style>
* {<!-- -->
margin: 0;
padding: 0;
}
#wrapper {<!-- -->
width: 200px;
height: 600px;
overflow: hidden;
margin: 10px;
cursor: pointer;
}
.item {<!-- -->
width: 200px;
height: 200px;
}
.item img{<!-- -->
width: 100%;
}
.item:nth-child(odd) {<!-- -->
background: skyblue;
}
.item:nth-child(even) {<!-- -->
background: pink;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="scroll_content">
<div id="list">
<div class="item">
<img src="../imgs/city1.png" alt="">
</div>
<div class="item">
<img src="../imgs/city2.png" alt="">
</div>
<div class="item">
<img src="../imgs/city3.png" alt="">
</div>
<div class="item">
<img src="../imgs/city4.png" alt="">
</div>
<div class="item">
<img src="../imgs/city5.png" alt="">
</div>
</div>
<div id="list1"></div>
</div>
</div>
<script>
var speed = 10; //The larger the number, the slower the speed
var tab = document.getElementById("wrapper");
var tab1 = document.getElementById("list");
var tab2 = document.getElementById("list1");
tab2.innerHTML = tab1.innerHTML;
tab.scrollTop = tab.scrollHeight
function Marquee() {<!-- -->
if (tab1.offsetTop - tab.scrollTop >= 0)
tab.scrollTop + = tab2.offsetHeight
else {<!-- -->
tab.scrollTop--
}
}
var MyMar = setInterval(Marquee, speed);
tab.onmouseover = function () {<!-- --> clearInterval(MyMar) };
tab.onmouseout = function () {<!-- --> MyMar = setInterval(Marquee, speed) };
</script>
</body>
</html>
