Div上的Javascript scrollTo/scrollBy

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

我有一个div，图像将在其中显示，我使这个div溢出：scroll，因此它将有一个滚动条，我希望滚动条是激活图像更改的一个（这是有效的）

我制作了一个css类“spacer”，它除了一个height属性之外什么都没有，可以在div中放置许多属性，以允许它滚动。（可能有更好的方法吗？）

我的问题：有没有一种方法可以在元素上而不是在窗口上使用scrollTo（x，y）或scrollBy（x，y）？当我这样做的时候，我只会出错。我基本上想让它滚动的高度“间隔”，所以滚动的数字将是相同的图像数量。就像现在一样，它滚动了太多次。图像的数量将发生变化，因此简单地调整间隔的高度将不起作用

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

我还想知道是否能够让onscroll事件触发一些东西，比如单击一个链接，使id为的div滚动到包含div的顶部，这基本上解决了我的问题，但我不知道这是否可能

函数聚焦crolling（）{
var imageArray=[]；
var imageDiv=document.getElementById（'focusImage'）；
imageArray=幻灯片放映（）；
if（prevScrollTop==未定义）{
document.getElementById（'navigation'）.className=“stickNav”；
document.getElementById（'topC'）.style.display=“inline”；
document.getElementById（'banner'）.style.display=“无”；
document.getElementById（'topContent'）.style.visibility=“visible”；
滚动div.style.marginTop=“20em”；
imageDiv.src=imageArray[currentCount].src；
}如果（scrollingDiv.scrollTop>prevScrollTop | | scrollingDiv.scrollTop==prevScrollTop&¤tCount<3）{
if（currentCount0）{
document.getElementById（'topImage'）.style.visibility=“visible”；
document.getElementById（'topImage'）.src=imageArray[currentCount-1].src；
}
}否则{
如果（当前计数>0）{
当前计数--；
imageDiv.src=imageArray[currentCount].src；
如果（currentCount==0）{
document.getElementById（'topImage'）.style.visibility=“hidden”；
}
document.getElementById（'topImage'）.src=imageArray[currentCount-1].src；
} 
}
prevScrollTop=scrollingDiv.scrollTop；
}

.main包装器{
显示器：flex；
高度：15公分；
宽度：95%；
位置：固定；
会变：溢出；
}
.main.img{
高度：10公分；
位置：固定；
边框：1px纯黄色；
}
.焦点包装器{
溢出y：滚动；
高度：15公分；
宽度：50em；
左边距：25em；
边框：1px纯黑；
}
.focusWrapper:：-webkit滚动条{
背景色：rgba（0,0,0,0.3）；
边界半径：10px；
宽度：20px；
}
.focusWrapper:：-webkit滚动条拇指{
背景：径向梯度（rgba（0，226，218，0.5），rgba（0，226，218，0））；
边界半径：10px；
最大高度：1px；
}
.focusWrapper:：-webkit滚动条轨迹{
-webkit盒阴影：插入0 0 6px rgba（0，226，218，0.5）；
边界半径：15px；
}
.包装纸{
位置：固定；
宽度：75%；
高度：15公分；
左边距：15%；
z指数：-2；
背景色：白色；
边缘顶部：2米；
可见性：隐藏；
}
.顶盖{
宽度：100%；
高度：100em；
z指数：-1；
背景色：rgba（0,0,0,0.8）；
位置：固定；
显示：无；
}
.底部包装纸{
位置：固定；
宽度：75%；
高度：15公分；
左边距：15%；
背景色：红色；
z指数：-2！重要；
边缘顶端：36em；
}
.垫片{
高度：15公分；
边框：1px纯紫色；
}

我刚刚创建了这个：
通过将

scrollpop

更改为

offsetTop

var div=document.getElementById（'focusContent'）；
var-curidx=0；
div.addEventListener（“车轮”，车轮上）；
控制盘上的功能（事件）{
var spacers=document.getElementsByClassName（'spacer'）；
event.preventDefault（true）；
如果（event.deltaY>0）{
如果（++curidx>=垫片长度）{
curidx=垫片。长度-1；
}
//console.log（间隔符[curidx].offsetTop）
scrollto=间隔符[curidx]。偏移设置；
返回；
}否则{
库里克斯--；
if（curidx<0）{
curidx=0
}
if（垫片[curidx]）{
scrollto=间隔符[curidx]。偏移设置；
返回；
}
}
}
var-to=0；
setInterval（函数（）{
//console.log（scrollto，div.scrollTop）
//（scrollto>div.scrollTop？1:-1）
如果（滚动到>div.scrollTop）{
div.scrollTop+=Math.sqrt（scrollto-div.scrollTop）；
}否则{
div.scrollTop-=Math.sqrt（div.scrollTop-scrollto）；
}
}，30）

.main包装器{
显示器：flex；
高度：15公分；
宽度：95%；
位置：固定；
会变：溢出；
}
.main.img{
高度：10公分；
位置：固定；
边框：1px纯黄色；
}
.焦点包装器{
溢出y：滚动；
高度：15公分；
宽度：50em；
左边距：25em；
边框：1px纯黑；
}
.focusWrapper:：-webkit滚动条{
背景色：rgba（0,0,0,0.3）；
边界半径：10px；
宽度：20px；
}
.focusWrapper:：-webkit滚动条拇指{
背景：径向梯度（rgba（0，226，218，0.5），rgba（0，226，218，0））；
边界半径：10px；
最大高度：1px；
}
.focusWrapper:：-webkit滚动条轨迹{
-webkit盒阴影：插入0 0 6px rgba（0，226，218，0.5）；
边界半径：15px；
}
.包装纸{
位置：固定；
宽度：75%；
高度：15公分；
左边距：15%；
z指数：-2；
背景色：白色；
边缘顶部：2米；
可见性：隐藏；
}
.顶盖{
宽度：100%；
高度：100em；
z指数：-1；
背景色：rgba（0,0,0,0.8）；
位置：固定；
显示：无；
}
.底部包装纸{