我只是注意到,如果我放大选项卡中的网页(通过执行Ctrl-Plus),然后打开Chrome扩展程序的弹出窗口,它也会被放大。不幸的是,这使它显示了垂直滚动条,甚至更大程度地显示了水平滚动条。
我看到其他扩展通过某种方式仅以100%缩放显示其弹出窗口,从而以某种方式阻止了此缩放。问题是怎么做?
对任何有兴趣的人的快速注释,我如何解决它。
首先,我刚刚学到了有关Chrome的一些细节。要缩放插件的弹出窗口,需要从Chrome的“设置”中打开其“选项”窗口,然后将其放大或缩小。然后,即使关闭“选项”页面,该相应的插件也将存储缩放。要还原它,只需在“选项”页面上还原缩放。太酷了,哈哈!遗憾的是,尽管许多插件并非为正确处理而设计的。正如我在最初的问题中提到的那样,大多数显示的滚动条看起来很奇怪,或者只是扭曲了内容。
这是我在插件中克服的方法:
首先,您需要确定弹出窗口的当前缩放比例。(以下内容仅在Chrome上进行了测试,摘自本文):
function getPageZoom()
{
//RETURN: 1.0 for 100%, and so on
var zoom = 1;
try
{
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
svg.setAttribute('version', '1.1');
document.body.appendChild(svg);
zoom = svg.currentScale;
document.body.removeChild(svg);
}
catch(e)
{
console.error("Zoom method failed: " + e.message);
}
return zoom;
}
然后创建一个可滚动的窗口DIV
,将弹出窗口的内容放置在可以滚动的位置:
#mainSection{
margin: 0;
padding: 0;
overflow-y: auto; /* The height will be defined in JS */
}
<div id="mainSection">
</div>
然后,DIV
使用页面缩放通过小的缩放计算来设置可滚动对象的最大高度。例如,从onLoad()
事件加载或在jQuery的DOM中加载DOM即可$(function(){});
:
//Get page zoom
var zoom = getPageZoom();
//Using jQuery
var objMain = $("#mainSection");
//Calculate height & offsets of elements inside `mainSection`
//using jQuery's offset() and outerHeight()
//Make sure to multiply results returned by zoom
var offsetElement1 = $("someElement1").offset().top * zoom;
var heightElement2 = $("someElement2").outerHeight() * zoom;
//Apply the calculations of the height (in real situation you'll obviously do more...)
var height = offsetElement1 + heightElement2;
//And finally apply the calculated height by scaling it back down
var scaledHeight = height / zoom;
//Need to convert the result to an integer
scaledHeight = ~~scaledHeight;
//And set it
objMain.css("max-height", scaledHeight + 'px');
当用户选择更大的缩放比例时,所有这些都应该仅在您想要的位置显示一个漂亮的垂直滚动条。
最后,您需要确保如果用户在显示弹出窗口时开始缩放扩展程序的“选项”页面,则需要将其关闭。我选择了这种方法:
$(window).resize(function()
{
var zoom = getPageZoom();
//Multiply zoom by 100 (to round it to 2 decimal points) and convert to int
var iZoom = zoom * 100;
iZoom = ~~iZoom;
if(window.izoom &&
iZoom != window.izoom)
{
//Close popup
window.close();
}
window.izoom = iZoom;
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句