javascript - 如何解决从带有网格的 scrollmagic 生成的 <div> 的问题？-6ren

javascript - 如何解决从带有网格的 scrollmagic 生成的
的问题？

转载作者：行者123 更新时间：2023-11-27 23:19:10

我看到了一个关于如何使用 CSS flex 制作漂亮的粘性滚动效果的教程。所以我想试一试并尝试使用 CSS 网格。但它不会正常工作。我已经解决了一些主要问题，但我对这些修复不是很满意。并且网格列仍然存在一个主要问题。有 2 列。左边只有一个 div，右边是几个 div。左边应该坚持，以便右栏滚动。但是一旦滚动功能触发右列就会改变宽度。我在这里找不到解决方案。其余的工作，但我相信有一种更优雅的方式来实现我想要的。我非常感谢任何帮助!谢谢!这里还有一个 CodePen 链接:https://codepen.io/roottjk/pen/QWLPwxZ

已经尝试用一些 CSS 宽度属性来解决宽度问题，但根本没有用。

HTML

    <div class="product-title">
        <h3>TEST</h3>
    </div>
  </div>
      <div class="sugar">

      </div>  
      <div class="private-label">


    </div>
      <div class="adventkalender">


    </div>
      <div class="sweets">

        </div>  

      <div class="ads">

        </div>

</section>

CSS

section.products {  
    display: grid;
    grid-template-areas:
    'title sugar'
    'title private-label'
    'title adventkalender'
    'title sweets'
    'title ads';
    margin-bottom: 100vh !important; 
}

.gridhuelle {
    display: grid;
    grid-area: title;
    background-color: transparent !important;
    z-index: -1;
    width: 100% !important;
}

.gridhuelle h3 {
    color: white;
    z-index: 10;
}

.product-title {  
    background-color: black !important;
    z-index: 1;
    height: 300vh;
    padding-top: 10.1875px !important;
}

.sugar {
    display: grid;
    grid-area: sugar;
    background-color: red;
    z-index: 5;
    padding: 1em;
    margin: 0 !important;   
}

.private-label {
    display: grid;
    grid-area: private-label;
    background-color: green;
    padding: 1em;
}

.adventkalender {
    display: grid;
    grid-area: adventkalender;
    background-color: blue;
    padding: 1em;
}

.sweets {
    display: grid;
    grid-area: sweets;
    background-color: yellow;
    padding: 1em;
}

.ads {
    display: grid;
    grid-area: ads;
    background-color: orange;
    padding: 1em;
}

function splitScroll() {
   const controller = new ScrollMagic.Controller();
   new ScrollMagic.Scene({
       duration: '200%',
       triggerElement: '.product-title',
       triggerHook: 0
   })
   .setPin('.product-title')
   .addIndicators()
   .addTo(controller);
}
splitScroll();

最佳答案

这是因为滚动。它正在添加内联 css 和覆盖位置，这就是它移动的原因:

我已将 width: 100% 和 position: sticky 添加到类 .product-title .产品标题{ 宽度:100%!重要；位置:置顶!重要；

/* Parallax Products */
function splitScroll() {
  const controller = new ScrollMagic.Controller();

  new ScrollMagic.Scene({
      duration: '200%',
      triggerElement: '.product-title',
      triggerHook: 0
    })
    .setPin('.product-title')
    .addIndicators()
    .addTo(controller);
}

splitScroll();

/* PRODUCTS */

section.products {
  display: grid;
  grid-template-areas: 'title sugar' 'title private-label' 'title adventkalender' 'title sweets' 'title ads';
  margin-bottom: 100vh !important;
}

.gridhuelle {
  display: grid;
  grid-area: title;
  background-color: transparent !important;
  z-index: -1;
  width: 100% !important;
}

.gridhuelle h3 {
  color: white;
  z-index: 10;
}

.product-title {
  background-color: black !important;
  z-index: 1;
  height: 300vh;
  padding-top: 10.1875px !important;
  width: 100%!important;
  position: sticky!important;
}

.sugar {
  display: grid;
  grid-area: sugar;
  background-color: red;
  z-index: 5;
  padding: 1em;
  margin: 0 !important;
}

.private-label {
  display: grid;
  grid-area: private-label;
  background-color: green;
  padding: 1em;
}

.adventkalender {
  display: grid;
  grid-area: adventkalender;
  background-color: blue;
  padding: 1em;
}

.sweets {
  display: grid;
  grid-area: sweets;
  background-color: yellow;
  padding: 1em;
}

.ads {
  display: grid;
  grid-area: ads;
  background-color: orange;
  padding: 1em;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Products Test Page</title>
  <link rel="stylesheet" href="products.css" class="ref">
</head>

<body>


  <!-- PRODUCTS START-->
  <header class="productsite">
    <h2>Products</h2>
  </header>


  <!-- START Grid Section -->
  <section class="products">
    <div class="gridhuelle">

      <div class="product-title">
        <h3>TEST</h3>
      </div>
    </div>
    <div class="sugar">

    </div>
    <div class="private-label">


    </div>
    <div class="adventkalender">


    </div>
    <div class="sweets">

    </div>

    <div class="ads">

    </div>

  </section>
  <!-- END GRID SECTION -->
  <!-- PRODUCTS END-->

  <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script>
  <script src="main.js"></script>
</body>

</html>

关于javascript - 如何解决从带有网格的 scrollmagic 生成的 <div> 的问题？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58114697/

文章推荐： html - Bootstrap : Change breadcrumb's active text color

文章推荐： C++ String.substr 输出不正确

文章推荐： javascript - JavaScript 和 HTML 中数字所有数字的总和

文章推荐： c++ - Square 无法正常工作 C++ Xcode 4.2.1

scrollmagic - 使用相同的类在带有 scrollmagic 的 View 上设置动画
我对 scrollmagic 很陌生，我希望在整个页面中多次使用单个类来在它进入 View 时进行动画处理。这可能吗？ see pen 欢迎任何指点。 $(function() { cont
ScrollMagic - 永久添加类，向上滚动时不会删除
我想做的就是在 div 第一次滚动到 View 中时向其添加一个类，然后将其保留在那里。 (所以，我不想切换它 - 只需触发一次)。我有一个基于向父 div 添加类的动画，即使我指定了一个方向，当我在
javascript - ScrollMagic 在不同窗口高度上的偏移
我正在使用 ScrollMagic 来获取一些滚动动画。问题是我需要使用偏移量，以便动画在滚动的某个点触发，但这完全取决于窗口高度。所以在我提供的示例中 https://jsfiddle.net/5
jquery - ScrollMagic 补间动画
我以前使用过 superscrollorama 并开始使用scrollmagic，但我无法设法让一些 div 正确地设置动画。前 2 个 div 很好，但最后两个，一旦我向下滚动，就不会动画。我还想向
javascript - 如何在窗口调整大小时禁用和启用 ScrollMagic？
我正在尝试固定 ul全尺寸屏幕上的侧边栏，然后取消该图钉并将其更改为父图 nav ul的在半尺寸屏幕上。所以基本上从一个触发器、目标和偏移开始>当屏幕尺寸改变时取消它们>(并)用新的设置固定一个新的选
jquery - ScrollMagic 固定并显示问题
我正在尝试将图片暂停一段时间。滚动一点后，图片(第 1 部分)应该淡出并显示下面的图片。再滚动一段时间后，两者都应该滚动出来。我正在使用http://janpaepke.github.io/Scro
jquery - Scrollmagic:防止页面在场景中滚动
我想使用scrollmagic 在我的页面上添加效果。我的滚动场景已定义并且可以工作。现在我希望页面在场景未完成时停止滚动。我尝试将场景放入带有 overflow-y:scroll; 的容器中，但这
javascript - ScrollMagic 未正确加载
我正在尝试使用 ScrollMagic 的这个特定动画 http://janpaepke.github.io/ScrollMagic/examples/advanced/parallax_sectio
javascript - ScrollMagic - 进度条
我在需要显示进度条的站点上使用 scrollMagic 库。该栏将显示用户在页面上的位置。进度条的宽度会随着用户向上或向下滚动而改变。我似乎无法让它与 scrollMagic 库一起使用。这是我在其他
javascript - ScrollMagic 销垫片太大
我是 ScrollMagic 的新手，所以不确定我是否忽略了一些明显的东西。我设置了一个 codepen这说明了我正在努力实现的目标，以及一个 alternative version 几乎做我想做的
javascript - Scrollmagic 添加结束触发器
我是第一次使用 ScrollMagic，据我了解如何根据起始元素和持续时间触发我的动画是否可以设置结束触发器而不是持续时间？ var smcontroller = new ScrollMagic.C
javascript - scrollMagic - 如何滚动到正确的位置？
有这样的事情。 https://jsfiddle.net/j6u6wp7x/1/ var scene; var controller; $(document).ready(function() {
javascript - Scrollmagic:视差部分内的动画内容问题
我正在试验视差和滚动魔法。在 scrollmagic demo 的视差示例中我正在尝试在第一个视差部分中制作动画内容。这是 a fiddle of my experiment . 我无法让 #box
javascript - ScrollMagic 在调整大小时更新触发位置
在我的网站上，ScrollMagic 场景触发器 Hook 位置存储在一个数组中 slideOffsets = []这是在使用初始化时填充的 var scene; for (var i=0; i元素滚
javascript - ScrollMagic - 鼠标滚轮和触控板停止工作
我正在使用 ScrollMagic 在这之后进行视差部分滚动 tutorial .我让它在视觉上工作，但现在使用鼠标滚轮或触控板时页面已停止滚动。它滚动的唯一方法是拖动右侧的滚动条。 main.c
javascript - ScrollMagic:如何将内容放置在视差背景之上
所以我在构建垂直视差滚动网站时遇到了问题。目前我正在使用 ScrollMagic 来创建视差部分，并且效果很好。当我尝试将内容放在上面时，问题就来了。对于我的情况，我正在使用 Bootstrap 的
javascript - Scrollmagic 触发器元素不工作
我有一个Scrollmagic问题:我正在使用triggerElement，但它说它在页面顶部进入triggerElement，但triggerElement却在页面中间。这是我的 ScrollMag
javascript - Scrollmagic - 滚动时背景颜色未正确更改
我在使用 scrollmagic 时遇到问题，因为我试图在 scrollmagic 中创建自然部分删除的演示，但我遇到了上述问题。看起来我在 querySelector 中出错了，但我不知道我在这里做
javascript - ScrollMagic 媒体查询？
我正在使用 ScrollMagic 插件，发现 here 。我在尝试跨多个屏幕尺寸固定对象时遇到问题。问题是我在引脚的“持续时间”属性中进行硬编码，但持续时间设置为像素。由于像素根据您使用的设备而不同
jquery - scrollmagic 部分删除示例的问题
伙计们，我正在使用 scrollmagic 来实现其视差部分删除视差效果。我一直在完全按照发现的方式关注演示 here而且我尝试的任何事情似乎都没有用。这让我发疯我已经在这里待了几个小时了。我在这里遗

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何解决从带有网格的 scrollmagic 生成的
的问题？

首页

博学

6Ren·AI

商城

javascript - 如何解决从带有网格的 scrollmagic 生成的 的问题？

javascript - 如何解决从带有网格的 scrollmagic 生成的
的问题？