相关疑难解决方法(0)

我找到了经典的MDN 公式来检查内容是否已滚动到底部，

element.scrollHeight - element.scrollTop === element.clientHeight

不再适用于所有情况。例如，如果您将MDN 上的演示页面的内容比例更改为大于 100%，您将不会获得正确的结果。发生这种情况是因为现在浏览器在元素上使用亚像素精度。特别scrollTop是现在不是 100% 的比例是小数值。实际上，问题的发生是因为===上面公式中的符号。

那么最简单但仍然可靠的解决方案是什么？

我正在尝试制定一个小指令，如果 div 当前滚动到底部，则将保持 div 滚动到底部，但如果用户向上滚动，则不会滚动到底部，但如果向后滚动，将继续向下滚动到底部，这是我到目前为止的代码

Vue.directive('scroller', {
  bind: function(el, bindings, vnode) {
  },
  componentUpdated: function(el, bindings, vnode) {
    console.log(el.scrollHeight - el.scrollTop, $(el).outerHeight())
    if (el.scrollHeight - el.scrollTop >= $(el).outerHeight()) {
      // scroll to bottom
    }

    // Leave the scroller alone
  }
});

这是我从控制台日志中得到的信息

bundle.js:8237 295 251.1875
bundle.js:8237 339 251.1875
bundle.js:8237 383 251.1875
bundle.js:8237 427 251.1875
bundle.js:8237 295 251.1875

如果我一直滚动到底部，我能得到的最接近的是 295，它从

251 251.1875但一旦开始溢出并开始滚动，它似乎就停留在 295，这是我能回到的最接近的 251。

我得到了计算

使用 jQuery 检测用户何时滚动到 div 底部

看这里:http: //jsfiddle.net/1L5y559z/

假设当有人滚动到div 1之下或之下时,我想改变身体的背景颜色,如果可以,我将如何使用jquery？

我知道有这个:

$(window).scroll(function() {
var y_scroll_pos = window.pageYOffset;
var scroll_pos_test = 100;

if(y_scroll_pos > scroll_pos_test) {
   $("body").css("background-color","black");
}
else
{
   $("body").css("background-color","white");
}
});

但是当你滚动过去或低于特定数字像素时.我试图为特定的div取得同样的东西.

我有一个div框，其中包含所有页面内容 .body-Container

还有一个div盒放在它的顶部，.body-Container它的作用就像一个叫做的盖子.coverImg。

我要实现的目标是将.body-Container位置固定，直到.coverImg滚动到视线之外，然后将位置从固定更改为相对。允许用户继续查看内容。

然后反转，当滚动到网页顶部时，它.body-Container变得固定，并.coverImg重新显示。

我给了.coverImg一个magin-bottom:100vh允许div滚动出视野的a。

我很难检测div的底部何时到达窗口的顶部。改变位置。

这是一个jsfiddle，可以更好地了解我要执行的操作。

HTML：

<div class="coverImg" style="background-image:url(https://cdn.creativelive.com/fit/https%3A%2F%2Fcdn.creativelive.com%2Fagc%2Fcourses%2F5158-1.jpg/640);">
</div>

<div class="body-Container">
  <div class="content">
    <div class='section'>
    </div>
    <div class='section'>
    </div>
    <div class='section'>
    </div>
  </div>
</div>

的CSS

.body-Container {
  position: relative;
  position:fixed;
  width: 100%;
  height: 99vh;
  margin: 0;
  padding: 0;
  border: 3px solid red;
}

.coverImg {
  width: 90%;
  height: 150vh;
  margin: 0 auto;
  border: 3px solid black;
  position: absolute; …