0

I want to make div's opacity = 0 at end of the horizontal scrollbar. For that, I want to find the horizontal scroll bar position or how to get the end of the scrollbar.

check jsfiddle: https://jsfiddle.net/khaledattia/mfxzurfz/

or check the code here

<body>
  <div class="container">
  <div class="left-arrow">&laquo</div>
  <div class="right-arrow">&raquo</div>
  <div class="a">
    <div class="b">
      <div class="background"></div>
      <div class="background"></div>
      <div class="background"></div>
      <div class="background"></div>
      <div class="background"></div>
      <div class="background"></div>
      <div class="background"></div>
      <div class="background"></div>
      <div class="background"></div>
      <div class="background"></div>
      <div class="background"></div>
    </div>
</div>
</div>
<body>
<script>
  var rightArrow = document.querySelector(".right-arrow");
var leftArrow = document.querySelector(".left-arrow");
var aDive = document.querySelector(".a");
var bDive = document.querySelector(".b");

leftArrow.style.opacity = 0;
var increment = 0;

rightArrow.onclick = function(){
    aDive.scrollTo(increment += 300, 0);
  leftArrow.style.opacity = 1;
}

leftArrow.onclick = function(){
    aDive.scrollTo(increment -= 300, 0);
  if(increment === 0){
    leftArrow.style.opacity = 0;
  }
}

</script>
Khaled Attia
  • 5
  • 3
  • Possible duplicate of [How to detect scroll position of page using jQuery](https://stackoverflow.com/questions/17441065/how-to-detect-scroll-position-of-page-using-jquery) – frodo2975 Apr 25 '18 at 19:49
  • To reliably detect scroll position cross browser, you're going to want to use jquery to add a scroll event handler to the scrolling div. From there, when the position equals the width of your div, you've hit the end and can hide the arrow. – frodo2975 Apr 25 '18 at 19:51

3 Answers3

0

I updated your Fiddle pretty rough update. This should help you find your answer.

Each time you're incrementing or decrementing the scroll bar you're moving it across the screen. Once you reach a set limit in the case below I set it greater than 800 on the increment I change the opacity on the increase (right arrow). Now you can still click it and increment will keep on growing (not efficient) but this should work both ways.

What you want to keep in mind is that the screen or the width of the page is only so wide, so tall etc. Once it hits this limit you'll want to stop it.

Here is your updated Fiddle

var rightArrow = document.querySelector(".right-arrow");
var leftArrow = document.querySelector(".left-arrow");
var aDive = document.querySelector(".a");
var bDive = document.querySelector(".b");

leftArrow.style.opacity = 0;
var increment = 0;

rightArrow.onclick = function(){
    aDive.scrollTo(increment += 300, 0);
  leftArrow.style.opacity = 1;
  if (increment > 800) {
    rightArrow.style.opacity = 0.5;
  }
}

leftArrow.onclick = function(){
    aDive.scrollTo(increment -= 300, 0);
  if(increment === 0){
    leftArrow.style.opacity = 0;
  }
}
Dylan Wright
  • 1,118
  • 12
  • 19
  • If you want to click to the end on one click just change the increment to the max width of the screen, div or whatever your container might be. – Dylan Wright Apr 25 '18 at 19:50
  • unfortunately this didn't solve my problem as i want .. i want to make the div's opacity of the right arrow = 0 when i reach to the end of the scrollbar with out specify number, i mean without specify (increment > 800) – Khaled Attia Apr 25 '18 at 21:01
0

You can't determine the position of a scroll bar. You can, however, determine the number of pixels that have been scrolled over.

This solution uses a scroll listener, so the buttons work when using the yellow buttons, the scroll bar or the mouse wheel:

var rightArrow = document.querySelector(".right-arrow");
var leftArrow = document.querySelector(".left-arrow");
var aDive = document.querySelector(".a");
var bDive = document.querySelector(".b");

leftArrow.style.opacity = 0;

rightArrow.onclick = function(){
  aDive.scrollBy(300, 0);
}

leftArrow.onclick = function(){
  aDive.scrollBy(-300, 0);
}

aDive.addEventListener("scroll", function() {
  if (aDive.scrollLeft === 0) {
    leftArrow.style.opacity = 0;
  } else {
    leftArrow.style.opacity = 1;
  }
  if (aDive.scrollLeft === aDive.scrollLeftMax) {
    rightArrow.style.opacity = 0;
  } else {
    rightArrow.style.opacity = 1;
  }
});
body{
  text-align: center;
  overflow-x: hidden;
}
.a{
    display: inline-block;
    height: 120px;
    max-width: 90%;
    overflow-x: auto;
  }
.b{
 width: 40000px;
}
.background:first-child{
  margin-left: 0;
}
.background{
  margin-top: 9px;
  width: 100px;
  height: 80px;
  background: green;
  float: left;
  margin-left: 10px;
  cursor: pointer;
}
.right-arrow, .left-arrow{
  background: yellow;
  height: 50px;
  width: 50px;
  border-radius: 100%;
  z-index: 1;
  cursor: pointer;
  line-height: 40px;
  font-size: 45px;
}
.right-arrow{
  position: absolute;
  top: 25%;
  right: 0;
}
.left-arrow{
  position: absolute;
  top: 25%;
  left: 0;
  opacity: 0;
}
.right-arrow:hover, .left-arrow:hover{
  box-shadow: 1px 2px 7px .15px gray;
}
.container{
  display: inline-block;
  position: relative;
  width: 100%;

}
<div class="container">
  <div class="left-arrow">&laquo;</div>
  <div class="right-arrow">&raquo;</div>
  <div class="a">
    <div class="b">
      <div class="background"></div>
      <div class="background"></div>
      <div class="background"></div>
      <div class="background"></div>
      <div class="background"></div>
      <div class="background"></div>
      <div class="background"></div>
      <div class="background"></div>
      <div class="background"></div>
      <div class="background"></div>
      <div class="background"></div>
    </div>
</div>
</div>
Aloso
  • 5,123
  • 4
  • 24
  • 41
0

I think the function you are looking for is element.getClientBoundingRect().right. Link to MDN

For example you can use element.scrollBy(300, 0) if those two elements don't have equal getCl...Rect().right values.

Caveman
  • 2,527
  • 1
  • 17
  • 18