javascript - 在网页右侧添加侧边栏，相应地调整大小和移动所有内容

Question

我正在创建一个 Chrome 扩展程序，它应该向所有网页添加边栏。这个侧边栏不应该与网页内容重叠，它应该放在现有内容旁边，实质上是将网页正文的宽度缩小到 initial width - sidebar width。

这是我想出的代码，但我遇到了一些页面的问题，例如 stackoverflow，看看顶部栏如何不像页面的其余部分那样收缩(截图附在代码下方)

        // create sidebar
        const sidebar = document.createElement("iframe");
        sidebar.src = chrome.extension.getURL("iframe/iframe.html");
        sidebar.id = "extensionSidebar";
        sidebar.frameBorder = "0";
        sidebar.style.height = "100%";
        sidebar.style.width = "100px";
        sidebar.style.position = "fixed";
        sidebar.style.top = "0";
        sidebar.style.right = "0";
        sidebar.style.zIndex = "2147483646";

        // append sidebar to body
        document.documentElement.appendChild(sidebar);

        // shrink body
        document.body.style.width = window.innerWidth - 100 + "px";

截图:

https://prnt.sc/o215x5

https://prnt.sc/o21637

Answer 1

顶部栏不会像您希望的那样缩小，因为它是固定的，它始终占据视口(viewport)宽度的 100%。它在您使用 stackoverflow 的示例中的 CSS 属性是:

...
position: fixed;
top: 0;
left: 0;
width: 100%; /*though it's not "really" 100vw*/
...

即使通过更改 CSS 中的 html 元素，例如为了将其最大尺寸更改为视口(viewport)宽度的 80%，导航栏仍将占用所有视口(viewport)的宽度。

要了解它，您可以尝试以下 fiddle ，它可能代表 istelf :https://jsfiddle.net/bcg2vkjm/4/

您可以在上面“取消注释”CSS 中的body 元素并查看结果，它可能会给您一些帮助!虽然它只应用 1 的比例(所以它不应该改变......)，出于某种原因它使固定元素适应 body 大小，这就是你想要的，你可能只需要与 translateX 和/或 scale 在 CSS 中，但这可能是一个有风险的解决方案，因为它改变了所有内容的显示方式，而不仅仅是固定元素，如您所见.

在您的 javascript 中，您可以尝试以下操作:

document.querySelector('body').style.transform = "scaleX(something)";

例如!