Detailed explanation of the example of highly adaptive and hidden scrollbars of iframe

Detailed explanation of the example of highly adaptive and hidden scrollbars of iframe

At work, we may encounter partnerships between our own company and other companies to jointly develop a project. At this time, we may need to embed other people’s pages on our website. In this case, we generally choose to use iframes to achieve our goals. But when using iframes, it really makes people feel headache, height uncontrollable, ugly scroll bars, etc. Below I will share some of my experiences when dealing with iframes.

Highly adaptable

<iframe src="/huiQunar"  frameborder=no scrolling="yes" style=" overflow-x:scroll; overflow-y:hidden; " width="100%" ></iframe>

<script type="text/javascript" language="javascript">
  var ifm= ("myiframe");
  =;
</script>

Highly adaptable and hidden scrollbars

&lt;html&gt;
&lt;head&gt;
  &lt;script type="text/javascript"&gt;
    function showS()
    {
      ("test").scrolling="yes";
      ("test").="scroll";
      //alert(("test").scrolling);

    }
    function hideS()
    {
      ("test").scrolling="no";
      ("test").="hidden";
      //alert(("test").);
    }
  &lt;/script&gt;

  &lt;style&gt;
    &lt;!-- .ifr{width:600px;height:600px;background:#fff;overflow:hidden;display:block;position:absolute;top: 0;left: 0;right: 0;} --&gt;
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="ifr" onMouseOut="hideS()" onMouseOver="showS()" style="  width: 100%;  height: 100%;"&gt;
  &lt;iframe  width="100%" height="100%" frameborder="0" src="" style="margin:0px;" &gt;&lt;/iframe&gt;
  &lt;script language="JavaScript"&gt;
    var iframe = ("test");
     = "/huiQunar";
    //The following determines whether the iframe is loaded and hides the scrollbar    if (){
      ("onload", function(){
        //hideS();
        //("loading").="none";
      });
    } else {
       = function(){
        //  hideS();
        //("loading").="none";
      };
    }
  &lt;/script&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

Hide scrollbars by taking tricks

The way to get tricks is to set the width of the iframe to 101%, so that the scroll bar can be hidden outside the screen, just set its overflow-x to hide. This method is unnecessary on mobile.

If you have any questions, please leave a message or go to the community of this site to exchange and discuss. Thank you for reading. I hope it can help you. Thank you for your support for this site!