在 pinterest 小部件中隐藏滚动条和框阴影

Question

我试过了

#pinterest-container [class$=_img] {
  display: block !important;
  box-shadow: none !important;
  border-radius: 0 !important;  
}

#pinterest-container [class$=_col] {
  padding: 0;
}

来自这篇文章 Minimal Pinterest Widget with CSS 和其他几篇文章，但边框（框阴影）没有变化。我能做些什么？改变颜色会起作用吗？

我还需要帮助隐藏小部件的滚动条（但仍然能够滚动）在所有浏览器上。

我试过了，但它从嵌入式页面中删除了所有滚动条。我只想删除小部件的滚动条。

html {
    overflow: scroll;
    overflow-x: hidden;
}
::-webkit-scrollbar {
    width: 0;  /* Remove scrollbar space */
    background: transparent;  /* Optional: just make scrollbar invisible */
}
/* Optional: show position indicator in red */
::-webkit-scrollbar-thumb {
    background: #FF0000;
}

我对 CSS 的了解有限，所以请提前帮助并感谢您。

Answer 1

在您的解决方案中，您从所有

html

元素中删除了滚动选项，这不是您所需要的。在

iframe

中，您需要在

pinterest widget

中找到具有滚动条的元素。这个元素是一个

span

。让我们看看如何将它与其他跨度区分开来。它有一个我认为只能在 pinterest 小部件中找到的特殊属性：“data-pin-log”。

使用这个，我专门从

pinterest widget

中删除了滚动条：

span[data-pin-log="embed_grid"] {
    overflow: scroll;
    overflow-x: hidden;
}
span[data-pin-log="embed_grid"]::-webkit-scrollbar {
    width: 0;  /* Remove scrollbar space */
    background: transparent;  /* Optional: just make scrollbar invisible */
}
/* Optional: show position indicator in red */
span[data-pin-log="embed_grid"]::-webkit-scrollbar-thumb {
    background: #FF0000;
}

在 codepen 中显示示例