如何用JavaScript让fixed定位元素实现可滚动？

我之前也碰到过这种社交网站三栏布局的痛点：左右栏设为fixed固定展示（比如左侧用户信息、右侧广告），中间栏relative可滚动，但窗口缩小后，左右fixed栏超出屏幕却没有水平滚动条，完全没法访问超出的部分。

这里分享一个JavaScript结合CSS的解决方法，目前暂时还没有纯CSS的实现方案：

第一步：配置基础CSS #

先给中间的内容容器（对应你的MainContent元素）设置以下样式，确保中间栏正常滚动：

#MainContent {
  overflow: auto;
  height: 100%;
}

第二步：添加JavaScript逻辑 #

这段代码会监听页面滚动和窗口尺寸变化事件，动态调整左右fixed栏的位置，让它们能跟着滚动访问，同时在窗口恢复足够宽度时回到初始布局：

function position(element) { 
  var data = element.getBoundingClientRect(); 
  return data.left; 
} 

// 监听滚动事件，调整侧边栏位置
window.addEventListener('scroll', function() { 
  var mainContentPosition = position(document.getElementById('MainContent')); 
  if(mainContentPosition <= 208) { 
    var diff = 208 - mainContentPosition; 
    document.getElementById('LeftContent').style = 'margin-left: -' + diff + 'px;'; 
    document.getElementById('RightContent').style = 'margin-left: ' + (744 - diff) + 'px;'; 
  } 
}); 

// 监听窗口resize事件，恢复初始布局
window.addEventListener('resize', function() { 
  if(window.innerWidth >= 1020) { 
    document.getElementById('LeftContent').style = 'margin-left: 0px;'; 
    document.getElementById('RightContent').style = 'margin-left: 744px;'; 
  } 
});

效果说明 #

调整后，当窗口宽度不足导致侧边栏超出屏幕时，滚动中间的内容栏，左右fixed栏会同步移动，你就能轻松访问到原本超出的部分；当窗口宽度恢复到1020px及以上时，侧边栏会自动回到最初的fixed定位位置，保持布局的完整性。

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