Sharethis分享按钮刷新后不显示，调整视口才出现的问题求助

问题原因 #

你的分享按钮容器sharethis-inline-share-buttons初始通过Bootstrap的d-none类设置为display: none，Sharethis初始化脚本仅在页面加载时检测可见元素，隐藏元素不会被初始化。而调整浏览器视口时，Sharethis会触发页面重绘逻辑，自动渲染出按钮。调整z-index无法解决问题，核心是元素未被初始化，而非层级冲突。

解决方案 #

在显示弹出层时，手动触发Sharethis的重新初始化逻辑，让它扫描并渲染原本隐藏的分享按钮容器。

修改步骤 #

方法一：直接触发初始化（无需修改CSS）

修改点击事件的JavaScript代码，添加手动初始化逻辑：

document.getElementById("button").addEventListener('click', () => {
  const popup = document.getElementById("popup");
  popup.classList.remove("d-none");
  popup.classList.add("d-block");
  
  // 延迟100ms确保DOM更新完成，确保元素可见后再初始化
  if (window.stButtons) {
    setTimeout(() => stButtons.locateElements(), 100);
  }
})

方法二：优化隐藏方式（更稳妥）

替换d-none为自定义隐藏类（不使用display: none），让元素在页面加载时仍处于DOM流中，Sharethis可提前检测到：

1. 添加CSS自定义隐藏类：

.custom-hidden {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

2. 修改HTML弹出层容器：

<div class="pop position-absolute end-10 custom-hidden" id="popup">

3. 修改点击事件：

document.getElementById("button").addEventListener('click', () => {
  const popup = document.getElementById("popup");
  popup.classList.remove("custom-hidden");
  popup.classList.add("d-block");
  
  if (window.stButtons) {
    stButtons.locateElements();
  }
})

原理说明 #

stButtons.locateElements()是Sharethis官方提供的方法，用于重新扫描页面上的分享按钮容器并完成初始化渲染。当原本隐藏的容器变为可见后，调用该方法即可让Sharethis识别并生成按钮。

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