CODEWITHSUNDEEP
cssloopsscroll
Kash
Kash

Reputation: 43

Is there a way to make infinate/loop horizontal scrolling CSS?

Is there a way to create a horizontal scrolling that loops using CSS?

So when the user scrolls and reaches the end it brings back the start continuously like its infinite/loop or a wheel.

Is there a way of doing this easily using CSS and HTML?

<style type="text/css">.auto-style1 {
  border-width: 0px;
}

.pagewrap {
  background-color: silver;
  width: 150px;
  margin: 0 auto;
}

.scroll {
  overflow-x: scroll;
}

.auto-style2 {
  border: 1px black solid;
}

</style>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta content="en-gb" http-equiv="Content-Language" />
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
  <title>Untitled 1</title>

</head>

<body>

  <div class="pagewrap">
    <div class="scroll">

      <table class="auto-style1" style="width: 90%;">
        <tr>
          <td class="auto-style2">1</td>
          <td class="auto-style2">2</td>
          <td class="auto-style2">3</td>
        </tr>
        <tr>
          <td class="auto-style2">123456</td>
          <td class="auto-style2">123456</td>
          <td class="auto-style2">123456789</td>
        </tr>
      </table>

    </div>
  </div>

</body>

</html>

Upvotes: 1

Views: 7535

Answers (4)

Lilo
Lilo

Reputation: 21

/* css code */
body, html {
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 100%;
    width: 100%;
}

.scroll-container {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
}

.scroll-content {
    display: inline-block;
    padding-left: 100%;
    animation: scroll 10s linear infinite;
}

.item {
    display: inline-block;
    padding: 20px;
    background: #f1f1f1;
    margin: 10px;
    border: 1px solid #ccc;
}

@keyframes scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}
<!-- html code -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Infinite Horizontal Scroll</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="scroll-container">
        <div class="scroll-content">
            <div class="item">Item 1</div>
            <div class="item">Item 2</div>
            <div class="item">Item 3</div>
            <div class="item">Item 4</div>
            <div class="item">Item 5</div>
        </div>
    </div>
</body>
</html>

Upvotes: 0

Ravi Pratap Rai
Ravi Pratap Rai

Reputation: 1

function addboxes(e){
    var categid = $(e).attr('data-categoryid') || 'a';
    //ajax cal here
    setTimeout(function(){ 
        for( i=0; i < 6; i++){
            $(e).append('<div class="box '+categid+'"></div>');
        }
        $(e).attr('data-loading',0);
        $(e).find('.box.loading').remove();
  }, 500);  
}

$('.infi-element').on('scroll',function(e){
    var lastDiv = $(this).find(' .box').last();
    var lastLeft = lastDiv[0].getBoundingClientRect().left;
    var windowWidth = $(window).width();
    var loading = parseInt($(this).attr('data-loading')) || 0;
  
    $("#monitor").text(" lastLeft ="+lastLeft+", windowWidth ="+windowWidth);

    if( lastLeft < windowWidth-100 && !loading ){
        $(this).attr('data-loading',1);
        $(this).append('<div class="box loading">loading...</div>');
        addboxes(this);
    }
});
.infi-element{display: flex;overflow: auto;}
    .box{background-color: bisque;width: 150px;height: 100px;margin: 10px;overflow-y: hidden;flex:0 0 auto;}
    .box.a{background-color:blue}
    .box.b{background-color:red}
    .box.c{background-color:green}
    .box.d{background-color:yellow}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <div>This is content before comment</div>

<div class="infi-container">
    <div class="infi-element" data-page='1' data-categoryid='a'>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</div>
<div class="infi-container">
    <div class="infi-element" data-page='1' data-categoryid='b'>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</div>
<div class="infi-container">
    <div class="infi-element" data-page='1' data-categoryid='c'>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</div>
<div class="infi-container">
    <div class="infi-element" data-page='1' data-categoryid='d'>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</div>
<div id=monitor></div>
<div>This is content before comment</div>

Upvotes: 0

G-Cyrillus
G-Cyrillus

Reputation: 105903

With css (and javascript) you will need to clone the element so it looks like scrolling for ever.

Your answer stands here : Is there a way to make infinate/loop horizontal scrolling CSS? .

here is a CSS example to demonstrate the idea , (using a shadow) and not a scrollbar , but the hover event:

Of course, this is for the fun of it, you will need javascript.

* {
  margin: 0;
  box-sizing: border-box;
}

div {
  display: flex;
  width: max-content;
  margin: auto;
  overflow: hidden;
}

b {
  background: white;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
}

b+b {
  order: 2;
}

table,
td {
  border: solid;
}

table {
  box-shadow: 150px 0;
  animation: slide 2s infinite linear paused;
  font-family: "Times New Roman";
  font-size: 18px;
}

td {
  box-shadow: 150px 0 0 -2px white, 150px 0 0, 150px 0 0 2px white;
  text-shadow: 150px 0;
  padding:2px;
}

b:hover~table {
  animation-play-state: running;
}

b+b:hover~table {
  animation-direction: reverse;
}

@keyframes slide {
  to {
    transform: translatex(-100%)
  }
}
<div>
  <b><</b>
  <b>></b>
  <table>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
  </table>
</div>

it could be done is not it should be done ;)

Upvotes: 0

Agus Zubiaga
Agus Zubiaga

Reputation: 542

Unfortunately, you can't do this with just CSS.

One way to do it is by duplicating the children inside the scrollable container and jumping back to the left when the original children are entirely invisible.

I added some JS code to your snippet that duplicates your table and uses the Intersection Observer API to determine when the original table is no longer visible and scroll all the way to the left.

const scroll = document.querySelector('.scroll');

const table1 = scroll.querySelector('table');

// Create a copy of the table and adds it to the scrollable element
const table2 = table1.cloneNode(true)
scroll.appendChild(table2);

const options = {
  root: scroll,
  rootMargin: '0px',
  threshold: 0
}

const callback = (entries) => {
  if (!entries[0].isIntersecting) {
    // table1 is out of bounds, we can scroll back to it
    scroll.scrollLeft = 0;
  }
}

const observer = new IntersectionObserver(callback, options);
observer.observe(table1);
<style type="text/css">.auto-style1 {
  border-width: 0px;
}

.pagewrap {
  background-color: silver;
  width: 150px;
  margin: 0 auto;
}

.scroll {
  overflow-x: scroll;
  display: flex;
}

.auto-style2 {
  border: 1px black solid;
}

</style>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta content="en-gb" http-equiv="Content-Language" />
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
  <title>Untitled 1</title>

</head>

<body>

  <div class="pagewrap">
    <div class="scroll">

      <table class="auto-style1" style="width: 90%;">
        <tr>
          <td class="auto-style2">1</td>
          <td class="auto-style2">2</td>
          <td class="auto-style2">3</td>
        </tr>
        <tr>
          <td class="auto-style2">123456</td>
          <td class="auto-style2">123456</td>
          <td class="auto-style2">123456789</td>
        </tr>
      </table>

    </div>
  </div>

</body>

</html>

Upvotes: 2

Related Questions