Question

0

308

Views

Email (delete/read) style swipe effect

I need to add an email style (delete / read) style swipe effect like the image below. Swap left for read, swipe right for delete.

I have the basic concept working but the slide action isn't satisfactory.

In my demo I have two versions, the top works as expected, you don't appear to be able to skip the middle slide to get to slide 1 or 3. In my second example I have made the left and right slides only 50px, when the user swipes fast, it skips the middle slide and shows the 1st slide. If the user swipes back, I need to it to back to the middle only.

I also need the second slider to start on slide 2. How can I achieve this or is there a better option?

I don't mind using javascript as long as it's not a library.

See Below.

/* setup */
:root, body {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-flow: column nowrap;
  font-family: monospace;
}
.container {
  display: flex;
  overflow: auto;
  flex: none;
  width: 100vw;
  scroll-snap-type: x mandatory;
}
.container2 {
  display: flex;
  overflow: auto;
  flex: none;
  width: 100vw;
  scroll-snap-type: x mandatory;
  scroll-snap-stop: always;
}

.container > div {
  text-align: center;
  scroll-snap-align: center;
  flex: none;
  scroll-snap-stop: always;
  width:100vw;
  height:100px;
}
.container2 > div {
  text-align: center;
  scroll-snap-align: center;
  
  flex: none;
  scroll-snap-stop: always;
  width:100vw;
  height:100px;
}
.container2 > div:nth-child(1), .container2 > div:nth-child(3) {
  width:50px;
}

/* coloration */
.container > div:nth-child(even), .container2 > div:nth-child(even) {
  background-color: #87EA87;
}

.container > div:nth-child(odd), .container2 > div:nth-child(odd) {
  background-color: #87CCEA;
}

.no-scrollbar {
  scrollbar-width: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

<div class="container no-scrollbar">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<div class="container2 no-scrollbar" style="margin-top:100px;" dir="ltr">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

about 4 years ago · Juan Pablo Isaza

Answer question

0

308

Email (delete/read) style swipe effect

Find remote jobs

Andres GPT