如何实现点击按钮时仅滚动固定div区域而非整个页面？

没问题，这个需求完全可以轻松实现！核心就是通过JavaScript操作目标Div的scrollTop属性（或者使用scrollBy方法），结合按钮的点击事件来精准控制它的滚动，而且不会影响整个页面的滚动。

具体实现步骤： #

1. 确认CSS配置
   首先确保你的目标Div已经正确设置了滚动相关的样式，这是滚动生效的基础：

   #div {
     position: fixed;
     /* 固定定位的其他属性，比如top/left */
     width: 200px;
     height: 300px; /* 必须设置固定高度，否则overflow不会生效 */
     overflow-y: scroll; /* 开启垂直滚动 */
     /* 可选：隐藏默认滚动条，如果需要的话 */
     /* scrollbar-width: none; */
     /* -ms-overflow-style: none; */
   }
   

2. JavaScript控制逻辑
   获取目标Div和按钮元素，给按钮绑定点击事件，每次点击调整滚动位置：

   // 获取元素
   const scrollContainer = document.getElementById('div');
   const upButton = document.getElementById('up');
   const downButton = document.getElementById('down');
   
   // 向上滚动逻辑
   upButton.addEventListener('click', () => {
     // 每次向上滚动30px，数值可以根据你的需求调整
     scrollContainer.scrollTop -= 30;
     // 如果想要平滑滚动效果，换成下面的代码：
     // scrollContainer.scrollBy({ top: -30, behavior: 'smooth' });
   });
   
   // 向下滚动逻辑
   downButton.addEventListener('click', () => {
     scrollContainer.scrollTop += 30;
     // 平滑滚动版本：
     // scrollContainer.scrollBy({ top: 30, behavior: 'smooth' });
   });
   

补充说明： #

• scrollTop属性表示元素内容向上滚动的像素值，值越大，内容越往上滚；
• 使用scrollBy方法并设置behavior: 'smooth'可以实现平滑滚动的动画效果，提升用户体验；
• 你可以根据列表项的高度来调整每次滚动的像素值，比如如果每个列表项高度是50px，就设置每次滚动50px，刚好滚动一个项目的距离。

这样设置后，点击"up"和"down"按钮时，就只有这个固定定位的Div会滚动，整个页面不会受到任何影响，完全符合你的需求~

内容的提问来源于stack exchange，提问作者FinnWithIt