问题：
如何监听滚动角和根据滚动位置添加/删除类
隆飞宇
我是Angular的新手，在一个项目中，第二个div应该开始滚动一个，第一个div到达它的底部。我已经设法使用普通Javascript实现了它，但不确定如何在Angular中实现同样的功能。如有任何帮助，我们将不胜感激。在这里拉小提琴
样式
body {
margin: 0;
padding: 0;
}
.container {
padding-bottom: 5rem;
}
.container.nopadding {
padding-bottom: 0;
}
.container-2 {
background-color: #474752;
position: fixed;
height: 5rem;
overflow: hidden;
bottom: 0;
z-index: 1;
}
.container-2.auto {
position: static;
height: auto;
}
h1 {
text-align: center;
text-transform: uppercase;
}
HTML
<div class="overflow">
<div class="container">
Donec sollicitudin molestie malesuada. Pellentesque in ipsum id orci porta dapibus. Nulla quis lorem ut libero malesuada feugiat. Pellentesque in ipsum id orci porta dapibus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum
ac diam sit amet quam vehicula elementum sed sit amet dui. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Vestibulum ac diam sit amet quam vehicula elementum
sed sit amet dui. Curabitur aliquet quam id dui posuere blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquet quam id dui posuere blandit. Proin eget tortor risus.
Donec sollicitudin molestie malesuada. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada. Pellentesque in ipsum id orci porta dapibus. Nulla quis lorem ut libero malesuada feugiat. Pellentesque
in ipsum id orci porta dapibus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum
ac diam sit amet quam vehicula elementum sed sit amet dui. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur aliquet quam id dui posuere blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor
sit amet, consectetur adipiscing elit. Curabitur aliquet quam id dui posuere blandit. Proin eget tortor risus. Donec sollicitudin molestie malesuada. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.Donec sollicitudin molestie malesuada. Pellentesque in ipsum id orci porta dapibus. Nulla quis lorem ut libero malesuada feugiat. Pellentesque in ipsum id orci porta dapibus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum
ac diam sit amet quam vehicula elementum sed sit amet dui. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Vestibulum ac diam sit amet quam vehicula elementum
sed sit amet dui. Curabitur aliquet quam id dui posuere blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquet quam id dui posuere blandit. Proin eget tortor risus.
</div>
<div class="container-2">
<h1>
Container 2 title
</h1>
Curabitur aliquet quam id dui posuere blandit. Pellentesque in ipsum id orci porta dapibus. Sed porttitor lectus nibh. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Curabitur aliquet quam id
dui posuere blandit. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Pellentesque in ipsum id orci porta dapibus.
</div>
脚本
(function() {
let container = document.querySelector('.container');
let containerScroll = document.querySelector('.container-2');
let containersHeight = container.offsetHeight;
window.addEventListener('scroll', function() {
console.log("Into scroll");
if (Math.floor(window.scrollY) >= Math.floor(container.offsetTop + containersHeight - window.innerHeight)) {
containerScroll.classList.add('auto');
container.classList.add('nopadding');
}
else {
containerScroll.classList.remove('auto');
container.classList.remove('nopadding');
}
});
})();
共有1个答案
闻鹤龄
下面是如何在angular中完成的（只是将您的代码翻译成angular方式）：
演示
@Component({
selector: "my-app",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
@ViewChild("firstContainer") containerOne: ElementRef;
@ViewChild("secondContainer") containerTwo: ElementRef;
constructor(private renderer: Renderer2) {}
@HostListener("window:scroll")
adjustHeights() {
console.log("Into scroll");
const containersHeight = this.containerOne.nativeElement.offsetHeight;
if (
Math.floor(window.scrollY) >=
Math.floor(
this.containerOne.nativeElement.offsetTop +
containersHeight -
window.innerHeight
)
) {
this.renderer.addClass(this.containerTwo.nativeElement, "auto");
this.renderer.addClass(this.containerOne.nativeElement, "nopadding");
} else {
this.renderer.removeClass(this.containerTwo.nativeElement, "auto");
this.renderer.removeClass(this.containerOne.nativeElement, "nopadding");
}
}
}
HTML：
<div class="overflow">
<div class="container" #firstContainer>
Donec sollicitudin molestie malesuada. Pellentesque in ipsum id orci porta dapibus. Nulla quis lorem ut libero malesuada feugiat. Pellentesque in ipsum id orci porta dapibus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum
ac diam sit amet quam vehicula elementum sed sit amet dui. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Vestibulum ac diam sit amet quam vehicula elementum
sed sit amet dui. Curabitur aliquet quam id dui posuere blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquet quam id dui posuere blandit. Proin eget tortor risus.
Donec sollicitudin molestie malesuada. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada. Pellentesque in ipsum id orci porta dapibus. Nulla quis lorem ut libero malesuada feugiat. Pellentesque
in ipsum id orci porta dapibus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum
ac diam sit amet quam vehicula elementum sed sit amet dui. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur aliquet quam id dui posuere blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor
sit amet, consectetur adipiscing elit. Curabitur aliquet quam id dui posuere blandit. Proin eget tortor risus. Donec sollicitudin molestie malesuada. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.Donec sollicitudin molestie malesuada. Pellentesque in ipsum id orci porta dapibus. Nulla quis lorem ut libero malesuada feugiat. Pellentesque in ipsum id orci porta dapibus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum
ac diam sit amet quam vehicula elementum sed sit amet dui. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Vestibulum ac diam sit amet quam vehicula elementum
sed sit amet dui. Curabitur aliquet quam id dui posuere blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquet quam id dui posuere blandit. Proin eget tortor risus.
</div>
<div class="container-2" #secondContainer>
<h1>
Container 2 title
</h1>
Curabitur aliquet quam id dui posuere blandit. Pellentesque in ipsum id orci porta dapibus. Sed porttitor lectus nibh. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Curabitur aliquet quam id
dui posuere blandit. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Pellentesque in ipsum id orci porta dapibus.
</div>
css也是一样的。
我认为使用CSS（可能有些人在玩position:sticky)会更好，但我真的没有深入考虑过，这只是我的本能
类似资料：
-
导航条示例 滚动监听插件会根据滚动的位置，自动更新导航条的目标。滚动在导航条下面的区域，查看active类的改变。弹出菜单的子项也同样会被高亮。 用法 需要Bootstrap导航条 Scrollspy currently requires the use of a Bootstrap nav component for proper highlighting of active links. 滚动
-
滚动监听是一个 jQuery 插件，用于追踪某一确定元素并且元素目前处于用户屏幕的焦点。我们的示例在每个文档页的右边。单击这些链接将滚动到页面元素的位置。 表格内容的结构 <div class="row"> <div class="col s12 m9 l10"> <div id="introduction" class="section scrollspy"> <p>内容 </p>
-
本文向大家介绍vue监听滚动事件实现滚动监听，包括了vue监听滚动事件实现滚动监听的使用技巧和注意事项，需要的朋友参考一下 在vue中实现滚动监听和原生js无太大差异，下面是一个简单的demo，可在控制台查看结果 以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持呐喊教程！
-
主要内容：用法,实例,选项,方法,实例,事件,实例,更多实例,实例,实例滚动监听（Scrollspy）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动，基于滚动条的位置向导航栏添加 .active class。 如果您想要单独引用该插件的功能，那么您需要引用 scrollspy.js。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。
-
主要内容：如何创建滚动监听,实例,实例滚动监听（Scrollspy）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动。 如何创建滚动监听 以下实例演示了如何创建滚动监听： 实例 <!-- 可滚动区域 --> <body data-spy="scroll" data-target=".navbar" data-offset="50"> <!-- The navbar - The <a> el
-
问题内容： 我知道您可以定义overflow：hidden; 在HTML主体上删除滚动条，但我仍然希望能够使用鼠标上的箭头或滚轮滚动。 在此先感谢您的帮助。 编辑：感谢您对悬停滚动条和自定义栏上的所有建议。另外，感谢您担心通过删除滚动条来影响用户体验。我会详细说明，以便您解释我的来历。 我有一个圆形页面（如果您使用滚轮或箭头按钮滚动，当到达底部时，它将重置为页面顶部并重新开始）。永无止境的循环。滚