CODEWITHSUNDEEP
javascript
user2713086
user2713086

Reputation: 49

Javascript scrollTo / scrollBy on Div

I am working on a page that has a simple slideshow. The mouse wheel activates changing the picture.

I have a div that the images will display in, and I made this div overflow: scroll so it will have a scrollbar and I want that scrollbar to be the one to activate the image change(this works).

I made a css class "spacer" with nothing but a height attribute to place numerous ones inside the div to allow it to scroll. (there might be a better way to do this?) but without them it will not scroll because the images are not loaded into the div, javascript adds the image to the div when scrolled.

My question: is there a way to use scrollTo(x,y) or scrollBy(x,y) on an element instead of on window? I just get errors when I do this. I basically want it to scroll by the height of the "spacer" so the scrolling number will be the same as the number of images. As it is now, it scrolls too many times. The number of images will change, so simply adjusting the height of the spacer will not work.

Here's my code, the images are local so I just added a border around the spacer (purple) and a border around where an image would be (yellow).

I was also wondering if I would be able to make the onscroll event trigger something like clicking a link that would make a div with the id scroll to the top of the containing div, that would essentially solve my problem but I don't know if that's possible. 

function focusScrolling(){
	var imageArray = []; 
	var imageDiv = document.getElementById('focusImage');
	imageArray = slideshow(); 
	if(prevScrollTop == undefined){
		document.getElementById('navigation').className ="stickNav";  
		document.getElementById('topC').style.display = "inline"; 
		document.getElementById('banner').style.display = "none"; 
		document.getElementById('topContent').style.visibility = "visible";
		scrollingDiv.style.marginTop = "20em";
		imageDiv.src = imageArray[currentCount].src;  
	} else if(scrollingDiv.scrollTop > prevScrollTop || scrollingDiv.scrollTop == prevScrollTop && currentCount < 3){ 
		if(currentCount < imageArray.length){
			currentCount++;
		}
		imageDiv.src = imageArray[currentCount].src; 
		if(currentCount > 0){
			document.getElementById('topImage').style.visibility = "visible";
			document.getElementById('topImage').src = imageArray[currentCount-1].src; 
		}
	} else{
		if(currentCount > 0){
			currentCount--;
			imageDiv.src = imageArray[currentCount].src; 
			if(currentCount == 0){
				document.getElementById('topImage').style.visibility = "hidden"; 
			}
			document.getElementById('topImage').src = imageArray[currentCount-1].src;
		} 
	}
	prevScrollTop = scrollingDiv.scrollTop;  
}
.mainWrapper{
	display: flex;
	height: 15em;
	width: 95%;
	position:fixed;
	will-change:overflow;
}

.mainWrapper img{
	height: 10em;
	position: fixed;
	border:1px solid yellow;
}

.focusWrapper{
	overflow-y: scroll;
	height:15em;
	width: 50em;
	margin-left: 25em;
	border:1px solid black;
}

.focusWrapper::-webkit-scrollbar{
	background-color:rgba(0, 0, 0, 0.3);
	border-radius: 10px;
	width: 20px;
}

.focusWrapper::-webkit-scrollbar-thumb{
	 background: radial-gradient(rgba(0, 226, 218, 0.5), rgba(0, 226, 218, 0));
	 border-radius: 10px;
	 max-height: 1px;
}

.focusWrapper::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 226, 218, 0.5); 
    border-radius: 15px;
}

.topWrapper{
	position: fixed;
	width: 75%;
	height: 15em;
	margin-left: 15%;
	z-index:-2;
	background-color: white;
	margin-top: 2em;
	visibility: hidden;
}

.topCover{
	width: 100%;
	height: 100em;
	z-index: -1;
	background-color: rgba(0, 0, 0, 0.8);
	position: fixed;
	display: none;
}

.bottomWrapper{
	position: fixed;
	width: 75%;
	height: 15em;
	margin-left: 15%;
	background-color: red;
	z-index:-2 !important;
	margin-top: 36em;
}

.spacer{
	height: 15em;
	border:1px solid purple;
}
<html>
<head>
</head>
<body>
  <div class="mainWrapper">
  <div class="topCover" id="topC"></div>
  <div class="topWrapper" id="topContent">
	<img src="" id="topImage" />
  </div>
  <div class="focusWrapper" id="focusContent" onscroll="focusScrolling()">
	<img src="" id="focusImage" />
  <div class="spacer">&nbsp;</div>
  <div class="spacer">&nbsp;</div>
  <div class="spacer">&nbsp;</div>
  </div>
  </div>  
</body>
</html>

Upvotes: 0

Views: 1758

Answers (1)

befzz
befzz

Reputation: 1292

I just created this:
You can scroll element to other by changing scrollTop to offsetTop

var div = document.getElementById('focusContent');
var curidx=0;

div.addEventListener('wheel',onwheel);

function onwheel(event){
	var spacers = document.getElementsByClassName('spacer');
  event.preventDefault(true);
  if(event.deltaY > 0 ) {
    if(++curidx >= spacers.length) {
      curidx = spacers.length - 1;
    }
   // console.log(spacers[curidx].offsetTop)
    scrollto = spacers[curidx].offsetTop;
    return;
  }else{
    curidx--;
    if( curidx < 0){
        curidx=0
     }
    if(spacers[curidx]){
      scrollto = spacers[curidx].offsetTop;
      return;
     }
  }
}
var scrollto = 0;

setInterval(function(){
  //console.log(scrollto,div.scrollTop)
  //(scrollto>div.scrollTop?1:-1)
  if(scrollto>div.scrollTop) {
    div.scrollTop += Math.sqrt(scrollto-div.scrollTop);
  } else {
     div.scrollTop -= Math.sqrt(div.scrollTop-scrollto);
  }
},30)
.mainWrapper{
	display: flex;
	height: 15em;
	width: 95%;
	position:fixed;
	will-change:overflow;
}

.mainWrapper img{
	height: 10em;
	position: fixed;
	border:1px solid yellow;
}

.focusWrapper{
	overflow-y: scroll;
	height:15em;
	width: 50em;
	margin-left: 25em;
	border:1px solid black;
}

.focusWrapper::-webkit-scrollbar{
	background-color:rgba(0, 0, 0, 0.3);
	border-radius: 10px;
	width: 20px;
}

.focusWrapper::-webkit-scrollbar-thumb{
	 background: radial-gradient(rgba(0, 226, 218, 0.5), rgba(0, 226, 218, 0));
	 border-radius: 10px;
	 max-height: 1px;
}

.focusWrapper::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 226, 218, 0.5); 
    border-radius: 15px;
}

.topWrapper{
	position: fixed;
	width: 75%;
	height: 15em;
	margin-left: 15%;
	z-index:-2;
	background-color: white;
	margin-top: 2em;
	visibility: hidden;
}

.topCover{
	width: 100%;
	height: 100em;
	z-index: -1;
	background-color: rgba(0, 0, 0, 0.8);
	position: fixed;
	display: none;
}

.bottomWrapper{
	position: fixed;
	width: 75%;
	height: 15em;
	margin-left: 15%;
	background-color: red;
	z-index:-2 !important;
	margin-top: 36em;
}

.spacer{
	height: 15em;
	border:1px solid purple;
}
<html>
<head>
</head>
<body>
  <div class="mainWrapper">
  <div class="topCover" id="topC"></div>
  <div class="topWrapper" id="topContent">

  </div>
  <div class="focusWrapper" id="focusContent" onscroll="">

  <div class="spacer" style="background-color:#fee;">SCROLL ME by wheel  111111&nbsp;</div>
  <div class="spacer" style="background-color:#efe;">SCROLL ME by wheel  22222&nbsp;</div>
  <div class="spacer" style="background-color:#eef;">SCROLL ME by wheel 333333&nbsp;</div>
  </div>
  </div>  
</body>
</html>

Upvotes: 2

Related Questions