Question 276167 in Html Question posted in
Some basic documentation can be found here.

Html – Horizontal scroll using CSS animation – translate with sticky position not working as expected

I have created a fiddle with infinite horizontal scroll using CSS animation and I want the first element in the list to be sticky.

It works as expected when using the left property in the @keyframes whereas it does not work when the transform: translateX property is used.

The reason for changing to transform is due to

  1. browser performance
  2. The elements inside the cards are flickering in a real-time scenario (where I have more complex element structure inside .card) which is expected to be solved by updating the code to the transform property.

Can anyone provide a solution for this scenario using transform?

.container {
  display: flex;
  overflow: hidden;
}

.scroller {
  display: flex;
  position: relative;
  animation: autoScroll 10s linear infinite;
}
 
.card {
  padding: 10px;
  margin: 0 10px;
  width: 70px;
  background: lightblue;
}
  
.sticky-el {
  width: 100px;
  background: cyan;
  position: sticky;
  left: 0;
}

@keyframes autoScroll {
  0% {
    transform: translateX(0);
    //left: 0;
  }

  100% {
    transform: translateX(-100%);
    //left: -100%;
  }
}
<div class="container">
  <div class="scroller">
    <div class="card sticky-el">Sticky 1</div>
    <div class="card">Card 1</div>
    <div class="card">Card 2</div>
    <div class="card">Card 3</div>
  </div>
  
  <div class="scroller">
    <div class="card sticky-el">Sticky 2</div>
    <div class="card">Card 21</div>
    <div class="card">Card 22</div>
    <div class="card">Card 23</div>
    </div>
</div>
Tags:

2

Answers


  1. 0

    Check if you need this.
    To achieve the desired effect, you can use a combination of position: fixed and JavaScript to create a similar scrolling effect while keeping the sticky behavior.

    .container {
display: flex;
overflow: hidden;
position: relative;
  }

  .scroller {
display: flex;
position: relative;
animation: autoScroll 10s linear infinite;
  }

  .card {
padding: 10px;
margin: 0 10px;
width: 70px;
background: lightblue;
  }

  .sticky-el {
width: 100px;
background: cyan;
position: -webkit-sticky;
position: sticky;
top: 0;
  }
  
  @keyframes autoScroll {
0% {
  transform: translateX(0);
}

100% {
  transform: translateX(-100%);
}
  }
      <div class="container">
<div class="scroller" id="scroller1">
  <div class="card sticky-el">Sticky 1</div>
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
  <!-- Add more cards as needed -->
</div>

<div class="scroller" id="scroller2">
  <div class="card">Card 21</div>
  <div class="card">Card 22</div>
  <div class="card">Card 23</div>
  <div class="card">Card 24</div>
  <!-- Add more cards as needed -->
</div>
  </div>
    Login or Signup to reply.
  2. 0 
    <div class="scroll-container">
  <div class="scroll-content">
    <!-- Your content goes here -->
  </div>
</div>


.scroll-container {
  width: 100%; /* Or any desired width */
  overflow-x: auto;
  white-space: nowrap;
}

.scroll-content {
  display: inline-block;
  /* Add content width or use content to determine width */
  width: 2000px; /* Change this to the total width of your content */
  animation: scrollAnimation 10s linear infinite;
}

@keyframes scrollAnimation {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search