このiFrameをスクロールする方法

このクライアントサイトにiframeを埋め込みます。私たちは正方形の店舗環境を統合し、トップにあるナビゲーションバーをスクロールして買い物をする余裕が増えるようにしたいと考えています。私は前にそれをやったことがありますが、それは私の考え方を複製する方法を見落としました。私は、ページ全体を1つのページとしてスクロールさせてより流動的に感じさせる方法を見つけ出すのを助けるのが大好きです。現在のところ、iframeだけをスクロールします。このiFrameをスクロールする方法

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <!-- 
    ////////////////////////////////////////////////////////////////////////////// 
    // WATERFALL TEMPLATE v1.0.1 
    // Theme Ported from Pineapple 1.1.0 - www.pa-lib.com 
    // Created on the 4.0 Bootstrap framework - www.getbootstrap.com 
    // (c) 2017, Justin Hammond Web Design - www.justinpaulhammond.com/web 
    // Code licensed under Creative Commons by 3.0. - www.creativecommons.org/licenses/by/3.0/ 
    // 
    // DO NOT REMOVE THIS HEADER, PERMISSION FOR PUBLIC USE GRANTED 
    ////////////////////////////////////////////////////////////////////////////// 
    --> 
    <title>Sego Lily Soap</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="shortcut icon" href="assets/pics/favicon.ico"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
    <link rel="stylesheet" href="https://pa-lib.com/pineapple/1.1.0/css/pineapple.css"> 
    <link rel="stylesheet" href="assets/css/waterfall.theme.css"> 
    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css"> 

    <style> 

    </style> 

</head> 
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="66"> 


<!-- NAV --> 
    <div style="background-color: #fbb18b;"> 
    <img src="assets/pics/logo.png" class="pa-banner-logo" style="width: 50vmin;padding-top: 30px;"> 
    <p style="color:#fff;text-align: center;">Yesterday's Traditions, Today's Luxurious</p> 
    <hr> 


<nav class="navbar navbar-inverse navbar-toggleable-sm" style="margin-top: -16px;"> 
<br><!-- FIXES MOBILE SPACING, NEEDED --> 
    <!--<div class="container">--> 
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#myNavbar" aria-controls="myNavbar" aria-expanded="false" aria-label="Toggle navigation" style="position: absolute;top: 50%;transform: translateY(-50%);"> 
     <span class="navbar-toggler-icon"></span> 
    </button> 
    <!-- 
     <a class="navbar-brand" href="#myPage"><h1 class="navbar-brand">WATERFALL THEME</h1><img src="assets/pics/logo.png" class="logo" alt="Logo" ></a> 
    --> 
    <div class="collapse navbar-collapse justify-content-center" id="myNavbar"> 
     <ul class="navbar-nav"> 
     <li class="nav-item"><a class="nav-link" href="index.php">Home</a></li> 
     <li class="nav-item"><a class="nav-link" href="products.php">Products</a></li> 
     <li class="nav-item"><a class="nav-link" href="frequently-asked-questions.php">FAQ</a></li> 
     <li class="nav-item"><a class="nav-link" href="benefits-of-tallow-soap.php">Benefits of Tallow Soap</a></li> 
     <!--<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="myNavbar" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Product Info</a> 
      <div class="dropdown-menu" aria-labelledby="myNavbar"> 
       <a class="nav-link" href="frequently-asked-questions.php">Frequently Asked Questions</a> 
       <a class="nav-link" href="benefits-of-tallow-soap.php">Benefits of Tallow Soap</a> 
      </div> 
     </li>--> 
     <li class="nav-item"><a class="nav-link" href="about.php">About</a></li> 
     <li class="nav-item"><a class="nav-link" href="contact.php">Contact</a></li> 
     <li class="nav-item"><a class="nav-link" href="http://segolilyreflections.blogspot.com">Blog</a></li> 
     </ul> 
    </div> 
    <!--</div>--> 
</nav> 
</div> 




<!-- known glitch, once a product is selected the scale goes back to 1, look into --> 
<iframe src="https://squareup.com/store/sego-lily-soap-2" style="height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px;padding-top:322px;border: none;"></iframe> 



<!-- SCRIPTS INCLUDED BECAUSE IFRAME BREAKS FOOTER--> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
<script src="https://pa-lib.com/pineapple/1.1.0/js/pineapple.min.js"></script> 
<script src="https://use.fontawesome.com/12e4399d79.js"></script> 
<script> 
function pageScrollFix() { 
    window.scrollBy(0,1); 
} 
</script>

出典

2017-07-12 Justin Hammond

あなたはインラインスタイルにこれを追加することができます。

overflow-y: auto;

別のオプション - あなたはHTML5を使用していない場合は次のようになります。

scrolling="yes"

注：あなたがかもしれニーズに応じて、水平と垂直の両方のスクロールバーが必要な場合はオーバーフローに、オーバーフローのみに、水平のみの場合はoverflow-xに変更します。

---新しいオプション---

あなたは（ thisframeは、IFRAMEのクラスがあると想定）は、次のWebKitのCSSを使用して試みることができる

：

.thisframe::-webkit-scrollbar { 
    /* remove scrollbar */ 
    display: none; 
}

別のオプションはではiframeをラップすることですdivはiframeよりも約15px狭く、スクロールバーを隠すことになります。

.iframe-wrapper { overflow:hidden; width:800px; } 
.iframe-window { overflow:scroll; width:815px; } 

<div class="iframe-wrapper"> 
    <iframe class="iframe-window" src="https://www.yoursite.com"></iframe> 
</div>

そして、まだ別のオプションは、おそらくない最も「エレガント」ソリューションものの、0PXへのiframeのスクロールバーの幅を設定することです。

他のすべてが失敗した場合、あなたはカスタムスクロールバーで任意の要素上でブラウザのスクロールバーを置き換えることができますjScrollPane使用することができますを、あなたがCSSでそれらのスタイルを設定することができますので、あなたはどのスクロールバーが消えるようでしたが（のようなもので：.jScrollPaneTrack { display: none; } ）これはもちろん、Webkit CSSを動作させることができない、または他のオプションのどれも、あなたが持っているブラウザのサポート要件に応じてタスクを実行しないことを前提としています。

出典

2017-07-12 18:25:56 Obewan

これはiframe（それはすでにスクロールしています）でも動作しますが、すべての1ページだけでなく、ビューからスクロールアップするにはnavbarが必要です。問題をかなり修正していない。 –

私はスクロールバーを隠すために上記の他のオプションを追加しましたが、スクロールバー自体を "ビューからスクロールアップ"することができる要素でラップされたフレームでラップされた要素で、私があなたの質問を正しく理解していれば。うまくいけば私が提供した他の解決策の1つは、あなたが行くことを試みていたということです。 – Obewan

もう1つの考え方iframe-wrapperの解決策があれば、iframeウィンドウのコンテンツに余裕を持たせて、iframeのすべてがすべてのブラウザに表示されるようにすることができます一部のブラウザ（たぶんそれは単なるモバイル）は、スクロールバーの幅を8pxに減らすことがあります。 – Obewan

このiFrameをスクロールする方法

答えて

関連する問題