Scroll up to the width of the image-CodePudding

I get the width of the image. When I go left and right, I want the border line to stop there. When I go to the right side, the gaps constantly open. Can anyone help with this?

jQuery

var  imgContainer = $('.images').width();
function checkScroll() {
  // Get current scroll position
  var scrollLeftPosition = $('.img-container').scrollLeft();

  // Calculate max scroll position
  var maximumScroll = $('.img-container').prop('scrollWidth') - 
                      $('.img-container')[0].offsetWidth;
  // Make sure they show unless the if statement passes below
  $('#left-scroll, #right-scroll').show();
  if ( ( scrollLeftPosition === 0 ) || 
       ( scrollLeftPosition === maximumScroll ) ) { 
  }
}
$('#left-scroll').click(function() {
      $(".img-container").animate(
      {scrollLeft: '-='   imgContainer   'px'}, 
      "fast", 
      checkScroll.bind(this)
    );
});

$('#right-scroll').click(function() {
    $(".img-container").animate(
      {scrollLeft: ' ='   imgContainer   'px'}, 
      "fast", 
      checkScroll.bind(this)
  );
});

http://jsfiddle.net/justfeel/snckrzhj/40/

Thank you advance.

CodePudding user response：

The problem is in your HTML, your <img src=""/> tags are separated by 1 space, which adds a 4px gap between each image and so, as you scroll to the right or left this gap compounds and messes up your scroll functionality.

An easy and fast fix is to just remove these spaces between the <img> tags.

You also have another issue, which is that the hr class adds one pixel gap to the right which also compounds and messes up the scroll exactitud. That's why I deleted your borders.

Try the following snippet:

var imgContainer = $('.images').width();

function checkScroll() {

  var scrollLeftPosition = $('.img-container').scrollLeft();

  var maximumScroll = $('.img-container').prop('scrollWidth') - 
                      $('.img-container')[0].offsetWidth;
  
  $('#left-scroll, #right-scroll').show();
  if ( ( scrollLeftPosition === 0 ) || 
       ( scrollLeftPosition === maximumScroll ) ) { 
  }
}
$('#left-scroll').click(function() {
      $(".img-container").animate(
      {scrollLeft: '-='   imgContainer   'px'}, 
      "fast", 
      checkScroll.bind(this)
    );
});

$('#right-scroll').click(function() {
    $(".img-container").animate(
      {scrollLeft: ' ='   imgContainer   'px'}, 
      "fast", 
      checkScroll.bind(this)
  );
});

.img-container{
  width:600px;
  height:200px;
  background:#ccc;
  overflow: auto;
  overflow-x: hidden;  /*hide default scrollbar*/
  white-space: nowrap;  /*makes list scrollable*/
  margin-left:200px;
  margin-top:50px;
}
.images{
  width:150px;
  height:auto;
}
#right-scroll {
    font-size: 15px;
    position:absolute;
    right: 150px;
    top:100px;
    text-shadow: 1px 1px 0 rgb(255 255 255 / 30%);
    cursor:pointer;
    z-index:999;
}
#left-scroll {
    position:absolute;
    left: 150px;
    color: black;
    top:100px;
    font-size: 15px;
    text-shadow: 1px 1px 0 rgb(255 255 255 / 30%);
    cursor: pointer;
    z-index: 999;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="img-container"><img class="images" src="https://picsum.photos/id/237/200/150"><img class="images" src="https://picsum.photos/id/238/200/150"><img class="images" src="https://picsum.photos/id/239/200/150"><img class="images" src="https://picsum.photos/id/240/200/150"><img class="images" src="https://picsum.photos/id/241/200/150"><img class="images" src="https://picsum.photos/id/242/200/150"><img class="images" src="https://picsum.photos/id/243/200/150"><img class="images" src="https://picsum.photos/id/244/200/150"></div>

<button id="left-scroll" >Left</button>
<button id="right-scroll">Right</button>