个人中心
gpt4 book ai didi

html - 如何制作此 iFrame 滚动

转载 作者：行者123 更新时间：2023-11-28 03:24:23 24 4
gpt4 key购买 nike

我正在向此客户站点嵌入一个 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>

最佳答案

您可以将其添加到内联样式中:

overflow-y: auto;

另一种选择 - 如果您不使用 HTML5 可能是:

scrolling="yes"

注意:根据您的需要，如果您同时需要水平和垂直滚动条，您可能希望将 overflow-y 更改为仅溢出，或者如果您只需要水平滚动条，则可能需要将 overflow-x 更改为仅溢出。

---新选项---

您可以尝试使用以下 webkit css(假设 thisframe 是 iframe 类):

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

另一种选择是将 iframe 包装在比 iframe 窄约 15px 的 div 中，这实际上会隐藏滚动条。

.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>

还有一个选择是将 iframe 滚动条的宽度设置为 0px，尽管这可能不是最“优雅”的解决方案。

如果一切都失败了，你可以使用 jScrollPane它允许您用自定义滚动条替换任何元素上的浏览器滚动条:并且由于您可以使用 CSS 设置它们的样式，因此您可以使任何滚动条消失(类似:.jScrollPaneTrack { display: none; })当然，这是假设您无法让 webkit CSS 工作和/或其他任何选项都无法完成任务，无论您有什么浏览器支持要求。

关于html - 如何制作此 iFrame 滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45064939/

24 4 0
文章推荐： html - 添加图标以在链接中显示多种文件类型
文章推荐： javascript - 自动刷新 div 中的 PHP 重定向
文章推荐： javascript - 具有 Web 服务调用的 Html5 应用程序可在模拟器上运行，但不能在设备上运行
文章推荐： javascript - 如何使用 angularjs 将样式应用于字符串中使用的分隔管道？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com