点击故事按钮时容器闪烁跳动问题及优化需求

一、修复按钮容器闪烁/跳动问题 #

闪烁的核心原因是内容切换时触发DOM重排，或容器尺寸动态变化导致布局偏移，按以下步骤解决：

• 用透明度过渡替代display:none
  不要直接隐藏/显示故事容器，通过透明度和高度的过渡实现内容切换，避免浏览器重排：

  #story-content {
    opacity: 0;
    height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease, height 0.3s ease;
  }
  #story-content.active {
    opacity: 1;
    height: auto;
    /* 如需固定高度，可设为具体值，比如 max-height: 600px; */
  }
  

  JS切换时只需给#story-content添加/移除active类，无需修改display属性。

• 固定按钮容器尺寸
  给包含按钮和输入框的容器设置最小高度，防止内容加载时容器尺寸波动：

  #control-container {
    min-height: 80px; /* 根据按钮+输入框实际高度调整 */
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 0;
    box-sizing: border-box;
  }
  

• 避免按钮点击时的布局偏移
  检查按钮的:active/:focus状态样式，不要添加额外margin/padding变化：

  button {
    padding: 8px 16px;
    border: none;
    cursor: pointer;
    outline: none; /* 去掉默认outline，或自定义样式避免偏移 */
  }
  button:active {
    /* 用transform替代尺寸变化，比如缩放 */
    transform: scale(0.98);
  }
  

二、适配Streamlabs OBS窗口设置 #

让容器适配窗口、居中并添加垂直滚动条，使用以下样式：

/* 全局容器，适配Streamlabs OBS窗口 */
#app-container {
  max-width: 90vw; /* 不超过视口宽度的90% */
  width: 800px; /* 最大宽度限制，按需调整 */
  margin: 20px auto 0; /* 水平居中，顶部留间距 */
  box-sizing: border-box;
}

/* 故事内容容器，添加垂直滚动条 */
#story-content {
  max-height: calc(100vh - 120px); /* 减去按钮容器高度+顶部间距，避免超出窗口 */
  overflow-y: auto;
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 4px;
  scrollbar-width: thin; /* 精简滚动条（Firefox） */
}

/* 自定义滚动条样式（Chrome/Safari） */
#story-content::-webkit-scrollbar {
  width: 6px;
}
#story-content::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 3px;
}

额外优化建议 #

内容加载时给按钮添加加载状态，防止重复点击：

function fetchStory() {
  const getBtn = document.querySelector('#get-story-btn');
  const randomBtn = document.querySelector('#random-story-btn');
  
  // 禁用按钮并显示加载状态
  getBtn.disabled = true;
  randomBtn.disabled = true;
  getBtn.textContent = 'Loading...';
  
  // 发起请求获取故事
  fetch('/api/story')
    .then(res => res.text())
    .then(content => {
      const storyContent = document.querySelector('#story-content');
      storyContent.innerHTML = content;
      storyContent.classList.add('active');
    })
    .finally(() => {
      // 恢复按钮状态
      getBtn.disabled = false;
      randomBtn.disabled = false;
      getBtn.textContent = 'Get Story';
    });
}

内容的提问来源于stack exchange，提问作者Patrik Qvarnström