Question

我正在制作一个简单幻灯片的页面。鼠标滚轮激活更改图片。

我有一个图像将显示的div，我使这个div溢出：滚动所以它将有一个滚动条，我希望滚动条是激活图像更改的那个（这个工作）。

我做了一个css课程＆＃34; spacer＆＃34;只有一个高度属性，可以在div中放置多个允许它滚动的高度属性。（可能有更好的方法来做到这一点？）但没有它们就不会滚动因为图像没有加载到div中，javascript会在滚动时将图像添加到div中。

我的问题：有没有办法在元素而不是窗口上使用scrollTo（x，y）或scrollBy（x，y）？我这样做时只会出错。我基本上希望它按照＆＃34; spacer＆＃34;的高度滚动。所以滚动数字将与图像数量相同。就像现在一样，它滚动太多次了。图像数量会发生变化，因此只需调整间隔物的高度就行不了。

这是我的代码，图片是本地的，所以我只是在垫片周围添加了一个边框（紫色）和一个图像所在的边框（黄色）。

我也想知道我是否能够使onscroll事件触发器点击一个链接，使得id会滚动到包含div的顶部，这基本上可以解决我的问题，但我不会＃ 39;不知道是否可能。

＆＃13;

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;  
}

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

我刚创造了这个：
您可以将scrollTop更改为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>

对于Div的Javascript scrollTo / scrollBy

1 个答案: