Question

当iframe大于整个页面时，如何使iframe自动将水平滚动位置居中到中心（占据整个页面）。没有100％制作！

第一张图片显示网站的正常情况。第二个显示了我缩小时的外观。第三个显示我想要它看起来如何。我想让它自动滚动到iframe的中心，然后隐藏水平滚动条，只能垂直滚动。

我通过搜索找到了几种不同的方法，但是当宽度大于视图时，没有一种方法可以工作。提前致谢！（抱歉我的英语不好）

以下是我尝试过的一些功能:(在stackoverflow上找到代码）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body, html
{
margin: 0; padding: 0; height: 100%; text-align: center;
}
</style>
</head>

<body onload="window.scrollTo((document.body.offsetWidth - document.documentElement.offsetWidth) / 2, (document.body.offsetHeight - document.documentElement.offsetHeight) / 2)
  /*
   * window.scrollTo(x,y) is an efficient cross-broser function,
   * which scrolls the document to position X, Y
   * document.body.offsetWidth contains the value of the body's width
   * document.documentElement contains the value of the document's width
   *
   * Logic: If you want to center the page, you have to substract
   * the body's width from the document's width, then divide it
   * by 2.
   */">
<iframe height="100%" frameborder="0" width="3000px" src="http://url.com">
</body>
</html>

和

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Test Layout</title>
<script>
var elem = document.getElementById("site"); //div#container
var elemWidth = elem.scrollWidth;
var elemVisibleWidth = elem.offsetWidth;
elem.scrollLeft = (elemWidth - elemVisibleWidth) / 2;
</script>
<style type="text/css">
body, html
{
margin: 0; padding: 0; height: 100%; text-align: center;
}

#content
{
    position:absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0px;
    text-align:center;
    overflow:auto;
    margin-right: auto;
    margin-left: auto;
 }

#site
{
    width:2600px;
}
        </style>


    </head>
<body>
        <div id="content">
            <iframe id="site" name="site" height="100%" frameborder="0" src="http://url.com" />
        </div>
</body>
</html>

Iframe - 自动居中水平滚动位置

0 个答案: