整页滚动到特定部分

Posted 2023-03-06

【中文标题】整页滚动到特定部分

【英文标题】：Full page scroll to a particular section

【发布时间】：2019-10-14 02:06:27

【问题描述】：

我有一个页眉、页脚和两个正文部分。我只想对我的视差容器进行整页滚动。我设法为视差设计了标记和样式，但脚本没有成功。

<div class="wrapper">
   <div class="top-content">
      <p>
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </p>
   </div>
   <div class="parallax">
      <div class="parallax__screen">
         <div class="parallax__image">
            <div class="parallax__illustration" style="background-image: url('https://picsum.photos/id/1/200/300');"></div>
         </div>
         <div class="parallax__copy">
            <p>
               Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
            </p>
         </div>
      </div>
      <div class="parallax__screen">
         <div class="parallax__image">
            <div class="parallax__illustration" style="background-image: url('https://picsum.photos/id/22/200/300');"></div>
         </div>
         <div class="parallax__copy">
            <p>
               Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
            </p>
         </div>
      </div>
      <div class="parallax__screen">
         <div class="parallax__image">
            <div class="parallax__illustration" style="background-image: url('https://picsum.photos/id/15/200/300');"></div>
         </div>
         <div class="parallax__copy">
            <p>
               it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged
            </p>
         </div>
      </div>
      <div class="parallax__screen">
         <div class="parallax__image">
            <div class="parallax__illustration" style="background-image: url('https://picsum.photos/id/10/200/300');"></div>
         </div>
         <div class="parallax__copy">
            <p>
               It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, 
            </p>
         </div>
      </div>
   </div>
   <div class="bottom-content">
      <p>
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </p>
   </div>
</div>

任何帮助将不胜感激。这是我的fiddle

【问题讨论】：

JS在哪里？

您需要 JS 解决方案来处理这种情况，示例如下：codepen.io/igstudio/pen/pbYOab/?html-preprocessor=pug

【参考方案1】：

您是否尝试固定标题并滚动视差部分？如果是这样，您可以设置标题（顶部内容）的位置和 z-index。

<style>.top-content position: fixed; z-index: 100; background-color: white; . 
</style>

这里是一个例子：Fiddle Here

【参考方案2】：

您是否试图避开任何图书馆并自己做？无论哪种方式，我认为您不能仅使用 CSS 来完成，您需要一些 JS。

我推荐fullPage.JS，真的好用。

【讨论】：

我试图避免使用库，但我对不涉及任何库的 javascript 解决方案持开放态度。

【参考方案3】：

这就是你的目标吗？

* 
  margin: 0;
  padding: 0;


body //you had a typo here
  background-color: #fff;
  font-size: 16px;
  color: #333;


.bottom-content 
  position: absolute;


.parallax 
  position: sticky;
  top: 96px;
  overflow: hidden;
  @include e(screen) 
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100vh - 96px);
    width: 100vw;
  
  @include e(image) 
    height: calc(100vh - 96px);
    border-radius: 0 rem(5) rem(5) 0;
    width: 100vw;
    z-index: 10;
  
  @include e(illustration) 
    height: inherit;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
  
  @include e(copy) 
    width: 100vw;
    z-index: 100;
    position: absolute;
  

通过这种样式，您可以实现顶部文本的视差

【参考方案4】：

你可以使用类似下面的东西。

var slide = function() 
        $('.nextsection').show();
            $('mainsection').find('.currentsection').animate(
                marginLeft : '-100%'
            , 500);
            $('mainsection').find('.nextsection').animate(
                marginLeft : '0%'
            , 500, function() 
                if (!_.isUndefined(fn)) 
                    fn();
                
            );
    ;

这里的'nextsection' 是你想要滑到的地方，'currentsection' 是你滑出的地方。 'mainsection' 就像 'nextsection' 和 'currentsection' 都包含的地方。

【讨论】：

你能摆弄一下吗？

【参考方案5】：

一些只使用 css 的例子：

https://keithclark.co.uk/articles/pure-css-parallax-websites/ https://www.okgrow.com/posts/css-only-parallax https://redstapler.co/css-parallax-scrolling-effect/