Добавьте боковую панель справа от веб-страницы, которая изменяет размеры и смещает все соответственно - PullRequest
Новая
       32

Добавьте боковую панель справа от веб-страницы, которая изменяет размеры и смещает все соответственно

0 голосов
/ 15 июня 2019

Я создаю расширение 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

1 Ответ

0 голосов
/ 15 июня 2019

Верхняя панель не сжимается так, как вы хотели бы, потому что она фиксирована, она всегда будет занимать 100% ширины области просмотра. Его CSS-свойства в вашем примере с stackoverflow: 

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

Даже изменяя элемент html в CSS, например, чтобы изменить его максимальный размер до 80% ширины области просмотра, панель навигации все равно будет принимать всю ширину области просмотра.

Чтобы понять это, вы можете попробовать следующую скрипку, она может говорить за istelf: https://jsfiddle.net/bcg2vkjm/4/

На нем вы можете «откомментировать» элемент body внутри CSS и увидеть результат, это может вам помочь! Хотя он применяет только шкалу 1 (поэтому он не должен меняться ...), по какой-то причине он заставляет фиксированный элемент адаптироваться к размеру тела, что вам и нужно, вам, возможно, придется играть вместе с translateX и / или scale в CSS, но это может быть рискованным решением, потому что оно сильно меняет способ отображения всего, а не только фиксированного элемента, как вы можете видеть.

В вашем javascript вы можете попробовать следующее:

document.querySelector ('body'). Style.transform = "scaleX (что-то)";

например!

...