Javascript - 当 window.pageYOffset 已经为 0 时检测滚动尝试

Question

我有一个div，它在页面加载时被推到 View 之外，然后暴露出来并推到top-bar并通过更改我的函数中的顶部样式来接管单击函数的屏幕其余部分，如下所示:

$('#drawer').animate({
      top: 92
    }, 500);

我想当该 div 可见时，检测用户是否正在向上滚动，以及当它尝试向上滚动时，div 会向下滑动用户向上滚动的像素量。我不知 Prop 体该怎么做。

在我的脚本中scroll-event.js我尝试设置一个函数，在文档准备就绪时首先声明全局变量 drawerIsUp = false; ，检查是 false 还是 true 然后执行滚动部分。但是，自从drawer涨了window.pageYOffset是 0 ，如何继续向 div top 添加像素样式，如果用户尝试滚动但 window.pageYOffset是 0已经了吗？

    $(document).ready(function (){
    drawerDiv = this.getElementById("drawer");
    topBar = this.getElementById("top-bar");
    drawerIsUp = false;


    scrollDrawer = function () {
      if (drawerIsUp) {
  console.log('entered');
        function winScroll() {
           drawerDiv.style.top = window.pageYOffset + "px";
        }
          winScroll();
          $(window).bind({scroll: winScroll});
      }
    }

});

这是 html:

         <div id="app">
            <div id="bg">
            </div>

              @section('topBar')
                @include('customer.layouts.partials.top-bar')
              @show
            <div id="main-section">
              @section('header')
                @include('customer.layouts.partials.header')
              @show

              @section('carousel')
                @include('customer.layouts.partials.carousel', ['function' => 'drawer', 'carouselPadding' => ''])
              @show
            </div>

            <div id="drawer">
              <div id="magazine-detail">
              </div>
              <div id="magazine-detail-carousel">
                @section('magazine-detail-carousel')
                  @include('customer.layouts.partials.carousel', ['function' => 'magazineDetail', 'carouselPadding' => 'carouselPadding'])
                @show
              </div>
            </div>

          </div>

所以，抽屉越过了 main-section单击时，然后当它结束时，如果用户向上滚动，我应该将其向下移动。

抽屉和顶栏的 CSS:

#main-section {
  height: calc(100vh - 92px);
  overflow-y: scroll;
  width: 100%;
  position: fixed;
  overflow-y: scroll;
  top:77px;
}

#drawer {
  z-index: 5;
  position: fixed;
  top: 100vh;
  height: calc(100vh - 92px);
  max-height: 100%;
  overflow-y: scroll;
  width: 100%;
  background-color: $white;
  padding-left: 15px;
  padding-right: 15px;
}

.top-bar {
  position: fixed;
  top: 0;
}

Answer 1

您在winResize函数中使用了drawer。但是 drawer 是在 $(document).ready 中声明的，因此 winResize 无法识别 drawer 的含义。

$(document).ready(function (){
    drawer = this.getElementById("drawer");
    topBar = this.getElementById("top-bar");
    drawerIsUp = false;

    function winResize() {
       drawer.style.top = topBar.offsetHeight + "px";
    }

    winResize();
    $(window).bind({resize: winResize, scroll: winScroll});
});

了解有关变量作用域的更多信息

https://www.sitepoint.com/demystifying-javascript-variable-scope-hoisting/