如何用CSS和[ngStyle]隐藏次级滚动条并解决背景显示问题

一、动态加载内容滚动时隐藏滚动条无效的解决 #

你提供的CSS代码无效，大概率是以下原因导致，对应解决方法如下：

• 选择器错误：代码里的element是占位符，必须替换成你实际要控制的滚动容器的选择器（比如类.scroll-box、ID#dynamic-content）。
• 元素无高度限制：overflow-y: scroll只有在元素有固定高度/最大高度时才会生效，需要给容器设置height或max-height。
• 父元素也存在滚动：如果父容器也设置了overflow: auto/scroll，会出现双滚动条，需要禁用父容器的滚动（设置overflow: hidden），只保留目标容器的滚动。
• CSS优先级不足：如果其他样式覆盖了你的滚动条设置，可以用更具体的选择器，或临时加!important测试（不推荐长期使用）。

修正后的示例代码：

/* 替换成你的滚动容器选择器 */
#dynamic-scroll-container {
  max-height: 90vh; /* 必须设置高度限制 */
  overflow-y: scroll;
  -ms-overflow-style: none; /* IE/Edge 隐藏滚动条 */
  scrollbar-width: none; /* Firefox 隐藏滚动条 */
}

/* Chrome/Safari/Opera 隐藏滚动条 */
#dynamic-scroll-container::-webkit-scrollbar {
  display: none;
}

二、Angular [ngStyle]背景色不显示的修复 #

你的代码中background是CSS复合属性，会重置所有背景相关样式（包括background-color），所以单独写的background-color会被覆盖。有两种解决方式：

方式1：拆分background属性 #

把复合的background拆成单个属性，避免覆盖背景色：

<section id="banner" 
  [ngStyle]="{ 
    'background-image': 'url(' + imgCenario + ')',
    'background-position': 'center',
    'background-size': '100%',
    'background-repeat': 'no-repeat',
    'background-color': 'rgb(234,239,239)'
  }"
  [ngClass]="classBanner" 
  class="imageContainer">
</section>

方式2：在background简写中包含背景色 #

直接在background简写属性里添加背景色值，这样不会被覆盖：

<section id="banner" 
  [ngStyle]="{ 
    'background': 'url(' + imgCenario + ') center/100% no-repeat rgb(234,239,239)'
  }"
  [ngClass]="classBanner" 
  class="imageContainer">
</section>

关于兼容性：这段[ngStyle]代码没有兼容性问题，只要你的Angular项目支持的浏览器（主流Chrome、Firefox、Edge、Safari等）都能正常解析，background-size: 100%是CSS3标准属性，现代浏览器均支持。

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