sharepoint-online - 嵌入式 SharePoint Online Excel 文件不显示水平滚动条

Question

期望的行为

将托管在 SharePoint Online 上的 Excel 文档嵌入到 HTML 页面中。

实际行为

嵌入加载，但是没有水平滚动条。

获取视口(viewport)右侧数据的唯一方法是单击一个单元格，然后使用右箭头键向右滚动。

我尝试过的

我已按照此处的说明进行操作:

https://support.microsoft.com/en-us/office/embed-your-excel-workbook-on-your-web-page-or-blog-from-sharepoint-or-onedrive-for-business-7af74ce6-e8a0-48ac-ba3b-a1dd627b7773

不幸的是，由于租户限制，我无法共享链接来演示该问题，因为似乎没有办法“匿名化”Microsoft 365 共享链接。

下面是一个截图——你可以看到有一个垂直滚动条，但没有水平滚动条。

左列和顶行是卡住 Pane 。

我希望我能够“向右滚动”，就像我在 Excel 在线版中一样。

这是使用的嵌入代码的格式:

<iframe height="500" width="100%" frameborder="0" scrolling="no" src="https://my-tenant.sharepoint.com/:x:/s/site-name/********?e=*****s&action=embedview&wdHideSheetTabs=True&wdAllowInteractivity=False&wdHideGridlines=True&wdDownloadButton=True"></iframe>

我不认为这是一个可以通过将 iframe 包装在带有某种溢出属性的 div 中来解决的问题 - 似乎水平滚动条 within iframe 嵌入本身不是显示。

Answer 1

Microsoft 支持人员为我做了一些超出范围的故障排除，并说他们可以暂时看到水平滚动条，然后它就消失了。

这让我查看了 Chrome 开发人员工具中的元素，我可以看出水平滚动条未显示的原因是它上面有一个 div(div 来自 Microsoft 嵌入代码)。

以下是在 Chrome 开发者工具中更改元素的 CSS 属性的屏幕截图:

带有边框:1px 纯红色...

使用display:none...

后一个更改允许水平滚动条可见(所需的行为)。

但是没有办法在 iframe 中覆盖 CSS。

供引用，相关样式为:

.ewa-stb-ltr.skeleton-sheet-bar-old, .ewa-stb-rtl.skeleton-sheet-bar-old {
    background-color: #F4F4F4;
    position: absolute;
    height: 27px;
    width: 100%;
    z-index: 1051;
    display: none; /* <--- adding this in chrome dev tools makes horizontal scrollbar visible */  
}