how to tell if page is scrolled all the way to the side

Question

I have a page that overflows the viewport. The user can scroll or swipe to see the whole page. I want to change the message from "swipe right" to "swipe left" depending on how far the user has scrolled, but I'm having trouble. How do I know when I've scrolled to the end sideways? Can anyone help?

var totalWidth = $('.container').width();

$(window).scroll(function() {
  var documentScrollLeft = $(document).scrollLeft();
  
  //switch command to swipe left or right depending on what point the user has scrolled to
  if (documentScrollLeft >= width) {
    $('.swipe').html("<i class='fas fa-arrow-left'></i> SWIPE LEFT");
  } else {
    $('.swipe').html("SWIPE RIGHT <i class='fas fa-arrow-right'></i>");
  }
});

.container {
  display: flex;
  /*align-items: center;*/
  /*width: 100%;*/
  position: absolute;
  top: 0;
  left: 0;
  /*height:100vh;*/
  margin-top: 0px;
}

@media only screen and (max-width: 1024px) {
  .container {
    top: 32px;
  }
}

.panel {
  height: 100vh;
  /*width: 25%;*/
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="swipe mobile">SWIPE RIGHT <i class="fas fa-arrow-right"></i></div>
<div class='container'>
  <img name="panel1" src="img/panel1.jpg" border="0" id="" alt="" class="panel" />
  <img name="panel2" src="img/panel2.jpg" border="0" id="" alt="" class="panel" />
  <img name="panel3" src="img/panel3.jpg" border="0" id="" alt="" class="panel" />
  <img name="panel4" src="img/panel4.jpg" border="0" id="" alt="" class="panel" />
</div>

score 0 · Answer 1 · answered Nov 21 '19 at 20:42

0

This is your starting point, just need to set your logic.

var lastScrollLeft = 0;
$(window).scroll(function() {
    var documentScrollLeft = $(document).scrollLeft();
    if (lastScrollLeft != documentScrollLeft) {
        console.log('horizontal scroll x');
        lastScrollLeft = documentScrollLeft;
    }
});

answered Nov 21 '19 at 20:42

Mahmoud Abdelsattar

1,299
1
15
31

Yes, but how do I know when to change the right/left sign in a way that's responsive? – LauraNMS Nov 21 '19 at 20:47

score 0 · Accepted Answer · answered Nov 22 '19 at 15:11

0

I'm using this code (see this stackoverflow question). It acts when the page is close to being scrolled all the way to the right:

if ($(window).scrollLeft() + $(window).width() > $(document).width() - 100) {
 //code here
}

answered Nov 22 '19 at 15:11

LauraNMS

2,720
7
39
73

how to tell if page is scrolled all the way to the side

2 Answers2