滚动子div，而父div在vue JS中处于粘性位置答案

【问题标题】：Scroll child div while parent div is position sticky in vue JS滚动子div，而父div在vue JS中处于粘性位置
【发布时间】：2022-11-04 09:24:59
【问题描述】：

我的登录页面有一个用例，当用户输入页面的<section> 之一时，该部分变为固定，但<div> 中的元素开始滚动。一旦内部div 完成滚动，父<section> 应该开始作为正常部分滚动，并且应该滚动到顶部。

我在下面的 jsFiddle 中创建了一个类似的结构。但无法实现所需的功能。

https://jsfiddle.net/8qm67ks9/2/

我想实现这个website 上提出的这种行为。下面的 SS 部分

HTML


... Other sections before

    <section ref="stickyDiv" class="scroller py-sm-128">
      <div class="">
        <div ref="wrapper" @scroll="scrollerListener" class="wrapper-box">
          <div class="d-flex px-sm-128">
            <h3 class="section-heading">Access to all the exclusive opportunities</h3>
            <div class="col-sm-6">
              <img class="img-fluid"
                   src="https://res.cloudinary.com/stack-finance/image/upload/v1663728853/app-assets/v2/mask_group_590_e5gbgr.png"
              >
            </div>
          </div>
          <div class="d-flex px-sm-128">
            <h3 class="section-heading">Access to all the exclusive opportunities</h3>
            <div class="col-sm-6">
              <img class="img-fluid"
                   src="https://res.cloudinary.com/stack-finance/image/upload/v1663728853/app-assets/v2/mask_group_590_e5gbgr.png"
              >
            </div>
          </div>
          <div class="d-flex px-sm-128">
            <h3 class="section-heading">Access to all the exclusive opportunities</h3>
            <div class="col-sm-6">
              <img class="img-fluid"
                   src="https://res.cloudinary.com/stack-finance/image/upload/v1663728853/app-assets/v2/mask_group_590_e5gbgr.png"
              >
            </div>
          </div>
        </div>
      </div>
    </section>

... Other sections in the bottom

Vuejs

  methods: {
    ...
    listenBodyScroll(e) {
      if (this.isMobile) {
        return;
      }

      const stickyDiv = this.$refs.stickyDiv;
      const wrapper = this.$refs.wrapper;
      const dim = stickyDiv.getBoundingClientRect();
      console.log(dim.y, dim.height, '---scrollTop');

      if (dim.y <= 0) {
        if (Math.ceil(dim.height) <= Math.abs(dim.y)) {
          stickyDiv.style.position = 'relative';
          stickyDiv.style.top = 'auto';
          stickyDiv.style.height = 'auto';
          wrapper.style.overflowY = 'hidden';
          wrapper.scrollTop = wrapper.scrollHeight;
          return;
        }

        wrapper.focus();
        stickyDiv.style.position = 'sticky';
        stickyDiv.style.top = '100px';
        stickyDiv.style.height = '100vh';
        wrapper.style.overflowY = 'auto';
      }
    },
    scrollerListener({ target: { scrollTop, offsetHeight, scrollHeight, style } }) {
      if (this.isMobile) {
        return;
      }

      const stickyDiv = this.$refs.stickyDiv;

      if ((Math.ceil(scrollTop) + offsetHeight) >= scrollHeight) {
        stickyDiv.style.position = 'relative';
        stickyDiv.style.top = 'auto';
        stickyDiv.style.height = 'auto';
        style.overflowY = 'hidden';
        console.log('bottom!');
      }
    }
  }

vue方向v-scroll


Vue.directive('scroll', {
  inserted(el, binding) {
    const f = function(evt) {
      if (binding.value(evt, el)) {
        window.removeEventListener('scroll', f);
      }
    };
    window.addEventListener('scroll', f);
  }
});

【问题讨论】：

标签： javascript html css vue.js

【解决方案1】：

Web 开发中没有秘密技术。使用浏览器的检查工具并检查网站的 HTML/CSS，看看它是如何为您自己工作的。

我自己做了这个，拿了一些网站的 HTML 和 CSS 并重新创建了一个简单的版本，你可以在这个 codesandbox 中看到

基本上，有两个 50% 宽度的 div 并排存在于同一个父 div 中，迫使它们具有相同（非常大）的高度。将父 div 滚动到视图中后，带有position: sticky 的图像容器会将其保持在相同的相对屏幕位置，直到您到达其父 div 的底部，然后它将与父 div 内容的其余部分一起滚动。

【讨论】：