代码之家  ›  专栏  ›  技术社区  ›  scopeak

滚动回窗口顶部时,滚动顶部位置不正确

  •  1
  • scopeak  · 技术社区  · 5 年前

    我正在使用 scrollTop 获取内部滚动分区的当前滚动位置 .content-inner . 从这里,我将添加一个 translate3d 更改另一个分区的位置 .header-top 给它一个动画效果。

    我有一个问题是在向上滚动后 内容内部 这个 头顶部 位置有点浮华,而不是它最初的位置。

    根据我向上滚动的速度,也将决定位置变化的程度。我怀疑这与输出的双负值有关。 翻译3D 如果你检查控制台。

    见: https://jsfiddle.net/ez379rax/5/

    1 回复  |  直到 5 年前
        1
  •  1
  •   Alex Leo    5 年前

    是的,你是对的,当你到达顶端时,计算中的问题是负值。

    我对代码做了一些更改,删除了不必要的溢出,并捕获了窗口滚动事件。还使收割台很好地安装在容器内。

    var pos = 0;
    var $ = jQuery;
    
     $(window).on("scroll", function() {
    
      var st = $(this).scrollTop();
      pos = (1.6 * (-st) - 20);
    	
      if(st === 0)
      {
      	pos = 0;
      }
    
      var up = 'translateY(' + pos + 'px )';
    
      $(".header").css({
        "transform": up
      });
    
    });
    .header{
    	  color: #333;
        height: 150px;
        padding: 25px;
        width:100%;
        position: fixed;
    		background:cornflowerblue;
        margin:5px;
    }
    
    .content-wrap{
    	height:100%
    }
    
    .content-inner{
    		padding-top: 100px;
        height: 100%;
        padding-left: 25px;
        padding-right: 25px;
        -ms-scroll-chaining: none;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        -ms-scroll-chaining: none;
        display: block;
    		background:#fff
    }
    
    .scroll-inner{
    	  min-height: calc(100% + 36px);
    }
    
    .card{
    	margin-bottom:1.5rem;
      width:100%;
    	p{
    		margin-bottom:0
    	}
    }
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <body>
      <div class="content-wrap">
        <div class="header">
          <h4>
            Widget Header
          </h4>
        </div>
    
        <div class="content-inner">
          <div class="scroll-inner">
            <div class="card">
              <div class="card-body">
                <h2>
                  Filler Card
                </h2>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                </p>
              </div>
            </div>
            <!-- end of card -->
            <div class="card">
              <div class="card-body">
                <h2>
                  Filler Card
                </h2>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                </p>
              </div>
            </div>
            <!-- end of card -->
            <div class="card">
              <div class="card-body">
                <h2>
                  Filler Card
                </h2>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                </p>
              </div>
            </div>
            <!-- end of card -->
            <div class="card">
              <div class="card-body">
                <h2>
                  Filler Card
                </h2>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                </p>
              </div>
            </div>
            <!-- end of card -->
            <div class="card">
              <div class="card-body">
                <h2>
                  Filler Card
                </h2>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                </p>
              </div>
            </div>
            <!-- end of card -->
            <div class="card">
              <div class="card-body">
                <h2>
                  Filler Card
                </h2>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                </p>
              </div>
            </div>
            <!-- end of card -->
          </div>
        </div>
      </div>
    </body>
    推荐文章