如何让容器从上到下向下滚动

Posted 2023-05-08

【中文标题】如何让容器从上到下向下滚动

【英文标题】：how to let the container scroll down from top to bottom

【发布时间】：2016-10-23 18:49:10

【问题描述】：

我想像这样实现这个html效果：

来自this website

图像从上到下滚动显示，很酷。

但我的工具是：

http://codepen.io/devbian/pen/dXOvGj

<div class="container container0">
  <img src='http://special.porsche.com/microsite/mission-e/assets/images/content/reveal/intro/intro-01.jpg' class='fixed'/>
</div>

<div class="container container1">
  <img src="http://special.porsche.com/microsite/mission-e/assets/images/content/reveal/intro/intro-02.jpg" class="moveable">
</div>

<div class="container container2">
  <img src="http://special.porsche.com/microsite/mission-e/assets/images/content/reveal/intro/intro-04.png" class="moveable">
</div>

<div class="container container3">
  <img src="http://special.porsche.com/microsite/mission-e/assets/images/content/reveal/intro/intro-05.jpg" class="moveable">
</div>




* 
  padding: 0;
  margin: 0;


body
  min-height:2000px;


.container 
  overflow: hidden;
  padding: 10px;
  position: relative;
  min-height: 300px;


.container img
  width:100%;
  height:300px;


/* .container0 
  background-color: #e67e22;

.container1 
  background-color: #ecf0f1;

.container2 
  background-color: #f39c12;

.container3 
  background-color: #1abc9c;
 */

.fixed 
  position:fixed;

.moveable 
  position:absolute;



$(function() 
  function setLogo() 
    $('.moveable').each(function() 
    $(this).css('top',
      $('.fixed').offset().top -  $(this).closest('.container').offset().top
    );
  );
    
  $(window).on('scroll', function() 
     setLogo();
  );
  setLogo();
)

这是从下到上。

如何通过滚动从上到下更改图像？

【参考方案1】：

Plunker

这是我为使这项工作自上而下所做的工作：

定位

- 每张汽车幻灯片都有position: absolute 并以bottom: 0% 开头，当您滚动它时，通过过渡到bottom: 100% 慢慢地显示幻灯片。例外情况是从左到右发生的第三次转换，即从left: -100% 移动到left: 0%。

当前幻灯片

- 当前幻灯片的计算方法是将滚动位置除以视图高度，然后像 Math.floor( scrollTop / height ) 这样向下取整。

当前幻灯片百分比

- 每个幻灯片过渡的当前百分比（用于过渡 bottom 和 left 样式）通过使用 @987654330 获取当前幻灯片位置之外的像素量来计算@，然后将其除以视图高度并将结果转换为像这样的百分比(partPixels / height) * 100。

然后，只要滚动位置发生变化，只需使用相关样式更新 DOM。

完整代码

window.onload = function()   
  var scrollTop, currentIndex, partPercentage, height, totalHeight;
  var stylesLastUpdate = ;
  var elementsCache = 
    partWrapper: document.getElementById("part-wrapper"),
    spacer: document.getElementById("spacer"),
    segment: document.getElementById("segment")
  ;
  var whiteBackgrounds = document.getElementsByClassName('part-background-light');
  var wbLength = whiteBackgrounds.length;
  var partElements = elementsCache.partWrapper.getElementsByClassName("part");
  var partsLength = partElements.length;
  var specialIndex = 3;
  partsLength += 1;
  for (var i = 0; i < partsLength; i++) 
    if (i < specialIndex) 
      elementsCache[i] = partElements[i];
    
    else 
      elementsCache[i] = partElements[i-1];
    
  

  resize();
  onScroll();
  document.addEventListener("scroll", onScroll);
  window.addEventListener("resize", resize);

  function onScroll() 
    scrollTop = document.body.scrollTop;
    if (scrollTop > totalHeight) 
      elementsCache.segment.classList.remove("fixed");
    
    else 
      elementsCache.segment.classList.add("fixed");
    
    currentIndex = Math.floor( scrollTop / height );
    var partPixels = scrollTop % height;
    partPercentage = (partPixels / height) * 100;
    updateDom();
  

  function updateDom() 
    var nextIndex = currentIndex + 1;
    for (var i = 0; i < partsLength; i++) 
      if (i === currentIndex && nextIndex < partsLength) 
        if (currentIndex !== (specialIndex-1)) 
          updateStyle(nextIndex, 'bottom:' + (100 - partPercentage) + '%;display:block');
        
      
      if (i <= currentIndex) 
        updateStyle(i, 'bottom:0%; display: block');
      
      if (i > nextIndex) 
        updateStyle(i, 'bottom:100%; display: none');
      
    
    updateWhiteBackgrounds();
  

  function updateStyle(index, newStyle) 
    if (!(index in stylesLastUpdate) || stylesLastUpdate[index] !== newStyle) 
      stylesLastUpdate[index] = newStyle;
      elementsCache[index].style.cssText = newStyle;
    
  

  function updateWhiteBackgrounds() 
    var wbPercentage = -100; // default
    if (currentIndex === (specialIndex-1)) 
      wbPercentage = -100 + partPercentage;
    
    else if (currentIndex > (specialIndex-1)) 
      wbPercentage = 0;
    
    var newStyle = 'left:' + wbPercentage + '%;display:block';
    if (!('whiteBackgrounds' in stylesLastUpdate) || stylesLastUpdate['whiteBackgrounds'] !== newStyle) 
      for (var m = 0; m < wbLength; m++) 
        whiteBackgrounds[m].style.cssText = newStyle;
      
    
  

  function resize() 
    height = elementsCache.partWrapper.clientHeight;
    totalHeight = height * (partsLength-1);
    updateStyle('spacer', 'padding-top:' + totalHeight + 'px')
  

body 
    margin: 0;


.special-scroll 
    padding-top: 1567px;


.segment 
    margin: auto;
    top: 0px;
    left: 0px;
    bottom: auto;
    right: auto;

.segment.fixed 
    position: fixed;


.animation-sequence 
    background-color: black;


.part-spacer 
    height: 15vh;
    position: relative;

.part-background-dark 
    background-color: black;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    


.part-background-light 
    background-color: white;
    position: absolute;
    width: 100%;
    height: 100%;
    left: -100%;
    top: 0;
    



.part-wrapper 
    position: relative;

.part 
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 100%;
    overflow: hidden;
    display: none;

.part-0 
    position: relative;
    display: block;

.part-2 img 
    position: absolute;

.part img 
    width: 100%;

.content 
    min-height: 2000px;

<!-- special-scroll -- start -->
    <div class="special-scroll" id="spacer">
      <div class="segment fixed" id="segment">
        <div class="animation-sequence">
          <div class="part-spacer spacer-top">
            <div class="part-background-light"></div>
          </div>
          
          <div class="part-wrapper" id="part-wrapper">
            <div class="part part-0">
              <img src="http://i.imgur.com/B6fq5d3.jpg">
            </div>
            <div class="part part-1">
              <img src="http://i.imgur.com/pE44BJ8.jpg">
            </div>
            <div class="part part-2">
              <div class="part-background-dark"></div>
              <div class="part-background-light"></div>
              <img src="http://i.imgur.com/U7bEh2I.png">
            </div>
            <div class="part part-4">
              <img src="http://i.imgur.com/HSNVbkR.jpg">
            </div>
            <div class="part part-5">
              <img src="http://i.imgur.com/1OGlaDI.jpg">
            </div>
            <div class="part part-6">
              <img src="http://i.imgur.com/CuTgGME.jpg">
            </div>
          </div>

          <div class="part-spacer spacer-bottom">
            <div class="part-background-light"></div>
          </div>
        </div>
      </div>
    </div>
    <!-- special-scroll -- end -->
    <div class="content">
    </div>

【讨论】：

太棒了！我有这个在我的最爱......因为我花了很多时间试图找到并失败了。竖起大拇指！赞成。 ;)

太棒了，很高兴它有帮助！