Javascript 滚动div中的边距转换效果

我想实现一个“橡皮”效果：比如当我们滚动超过限制时，滚动元素滚动“超过”限制一点

所以我考虑在页边空白处添加CSS转换。

页边距顶部

转换正如我所期望的那样工作。但是

边距底部

应该“向上推元素”，因此我们看到它的下边框被推。现在看起来滚动元素变长了，但不是“向上推”

有人能看出我做错了什么吗

constScrollWrapper=document.getElementById（'scrollWrapper'）；
const scrollChild=scrollWrapper.children[0]；
const buttons=document.queryselectoral（'button'）；
const topBtn=按钮[0]；
const bottomBtn=按钮[1]；
topBtn.addEventListener（'单击'，（）=>{
scrollWrapper.scrollTop=0；//因此它会上升并显示效果
scrollChild.style.marginTop='20px'；
setTimeout（（）=>scrollChild.style.marginTop='0px'，2000）；
});
bottomBtn.addEventListener（'单击'，（）=>{
scrollWrapper.scrollTop=scrollWrapper.scrollHeight；//因此它向下显示效果
scrollChild.style.marginBottom='20px'；
setTimeout（（）=>scrollChild.style.marginBottom='0px'，2000）；
});
#滚动包装器{
溢出y：滚动；
高度：130像素；
}
部分{
利润率：10px；
}
分区>分区{
边际：0px；
过渡期：保证金。7秒缓解；
高度：1000px；
背景图像：线性渐变（红色、黄色）；
}

上边距
底边
你需要某种滚动速度，否则这种效果就没有意义了。我会想办法，但首先我需要知道这是否也适用于触摸屏？嗨@Manueloto我会在touch中使用它，是的。但这不是我主要关心的，我能达到的部分，只是想用效果来解决问题。如果你有可能发布一个例子，那就太好了。你需要某种滚动速度，否则这个效果就没有意义了。我会想办法，但首先我需要知道这是否也适用于触摸屏？嗨@Manueloto我会在touch中使用它，是的。但这不是我主要关心的，我能达到的部分，只是想用效果来解决问题。如果你有可能张贴一个例子将是伟大的。