overflow-y:scroll不生效求助：歌词内容溢出div容器

嘿，我之前做项目也碰到过类似的滚动失效问题，咱们一步步拆解排查哈！

首先看你给出的CSS代码，先指出几个可能的问题点，再给你对应的修复方案：

1. 先修正无效的CSS属性 #

你给#albumsongs设置了opacity:2;，这是无效的——opacity的取值范围是0到1（0完全透明，1完全不透明），这个错误虽然不会直接导致滚动失效，但可能引发其他样式异常，先改成opacity:1;（如果需要半透明可以用0.5这类值）。

2. 确保滚动属性正确应用，且容器有明确高度限制 #

overflow-y:scroll生效的核心前提是：

• 容器有明确的高度限制（你这里设置了height:90%，这个没问题，但要确保父元素#cover的高度是有效的——#cover是fixed定位且height:100%，这个是ok的）
• 容器的内容高度确实超过了容器本身的高度

你当前的代码里没看到给#albumsongs添加overflow-y:scroll，所以先把这个属性加上。另外，因为你设置了5px的边框，建议加上box-sizing:border-box;，让边框宽度包含在height:90%里面，避免容器实际高度超出父元素。

3. 排查是否有其他样式干扰 #

• 检查#albumsongs里面的歌词容器有没有设置position:absolute/fixed这类脱离文档流的属性，如果有的话，容器不会计算这些内容的高度，自然不会触发滚动。
• 用浏览器开发者工具查看#albumsongs的computed样式，确认overflow-y属性没有被其他CSS规则覆盖。

修改后的示例CSS #

#cover{ 
  position:fixed; 
  top:0; 
  left:0; 
  background:rgba(0,0,0,0.6); 
  z-index:5; 
  width:100%; 
  height:100%; 
  display:none; 
} 

#albumsongs{ 
  background-color:black; 
  opacity:1; /* 修正无效opacity */
  height:90%; 
  width:70%; 
  position:absolute; 
  top:5%; 
  left:10%; 
  z-index:10; 
  display:block; 
  border:5px solid #cccccc; 
  border-radius:10px; 
  overflow-y:scroll; /* 添加垂直滚动 */
  box-sizing:border-box; /* 边框包含在宽高内 */
} 

#albumsongs:target {
  display:block; /* 确保target状态下容器显示 */
}

按这个调整后，应该就能正常触发垂直滚动了，如果还是不行，建议检查歌词内容的实际高度是否真的超过了#albumsongs的高度，或者有没有JS动态修改了容器的样式~

内容的提问来源于stack exchange，提问作者K. P.