添加<p>标签后HTML页面出现滚动条闪烁问题如何解决？

问题根源 #

滚动条闪烁的核心原因是轮播组件切换时的页面高度抖动：

1. 你当前的轮播逻辑是先把所有slide设置为display: none（此时slide不占用页面高度，轮播容器高度瞬间塌陷为0），再给当前激活的slide设置display: block（轮播容器高度恢复为图片高度），切换过程会导致页面总高度出现短时间跳变
2. 未添加<p>标签时，页面总高度即使在轮播容器塌陷的状态下也低于视口高度，不会触发滚动条；添加<p>标签后，轮播容器正常显示时页面总高度超过视口会出现滚动条，轮播塌陷时总高度回落又会隐藏滚动条，来回切换就出现了滚动条闪烁的现象。

解决方案 #

极简方案（改动最少） #

如果你的所有轮播图尺寸固定，直接给轮播容器设置固定高度即可，直接避免高度塌陷：

.slideshow-container {
  height: 500px; /* 替换为你实际轮播图的高度 */
  overflow: hidden;
}

通用适配方案（适配不同高度的轮播图） #

如果轮播图高度不固定，可以改造轮播的显隐逻辑，彻底解决高度跳变问题：

1. 调整轮播相关样式

.slideshow-container {
  max-width: 100%;
  position: relative;
  margin: auto;
  overflow: hidden;
}
.mySlides {
  /* 去掉原来的display: none，新增以下样式 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
}
.mySlides.active {
  opacity: 1;
  z-index: 1;
  position: relative; /* 激活的slide用相对定位，撑起来父容器的高度 */
}

2. 调整轮播JS逻辑

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  // 替换原来的display:none逻辑，改为移除active类
  for (i = 0; i < slides.length; i++) {
    slides[i].classList.remove("active");  
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}    
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  // 替换原来的display:block逻辑，改为添加active类
  slides[slideIndex-1].classList.add("active");  
  dots[slideIndex-1].className += " active";
  setTimeout(showSlides, 2000);
}

可选优化 #

可以全局重置p标签的默认外边距，避免不同浏览器默认样式导致的高度偏移：

p {
  margin: 16px 0; /* 按你需要的间距调整即可 */
}

如果没有特殊需求，也可以删掉全局样式里的div{overflow:hidden;}，只给需要的div单独设置溢出隐藏，避免不必要的布局限制。

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