10 examples of 'on scroll add class' in JavaScript

Every line of 'on scroll add class' code snippets is scanned for vulnerabilities by our powerful machine learning engine that combs millions of open source libraries, ensuring your JavaScript code is secure.

All examples are scanned by Snyk Code

By copying the Snyk Code Snippets you agree to
this disclaimer
544function _scrollCallback() {
545
546 function toggleActiveClass(el) {
547 if (_utils.isElementInViewport(el, 0.75)) {
548 el.classList.add('active');
549 } else {
550 el.classList.remove('active');
551 }
552 }
553
554 Array.prototype.forEach.call(elements, toggleActiveClass);
555 }
Important

Use secure code every time

Secure your code as it's written. Use Snyk Code to scan source code in minutes – no build needed – and fix issues immediately. Enable Snyk Code

23function addScrollEvent( el ) {
24 if ( !el ) return;
25 elem = el;
26 el.addEventListener( "scroll", applyClasses, false );
27}
24_addScroll() {
25 if (this._getScrollTop() >= 50) {
26 this.refs.navElement.classList.add('scroll');
27 } else {
28 this.refs.navElement.classList.remove('scroll');
29 }
30}
36function on_scroll()
37{
38 let logo = document.getElementById("logo");
39
40 if(window.scrollY > document.getElementById("header").offsetHeight - 120){
41 if(!logo.classList.contains("sticky")) logo.classList.add("sticky");}
42 else {
43 if(logo.classList.contains("sticky")) logo.classList.remove("sticky");}
44}
68bindScroll() {
69 this.scrollContainer = (window.mqq && window.mqq.iOS) ? document.querySelector(this.wrapper) : window;
70 this.scrollContainer.addEventListener('scroll', this.scrollEvt);
71}
55addScrollEvents(type) {
56
57 switch (type) {
58 case "all":
59 this.left.onscroll = this.handleEventLeftScroll.bind(this);
60 this.main.onscroll = this.handleEventMainScroll.bind(this);
61 this.right.onscroll = this.handleEventRightScroll.bind(this);
62 this.right.onwheel = this.onWeel.bind(this);
63 this.main.onwheel = this.onWeel.bind(this);
64 this.left.onwheel = this.onWeel.bind(this);
65 this.group.onwheel = this.onWeel.bind(this);
66 this.vhandle.onscroll = this.handleEventVhandle.bind(this);
67 this.hhandle.onscroll = this.handleEventHhandle.bind(this);
68 break;
69 case "left":
70 this.main.onscroll = this.handleEventMainScroll.bind(this);
71 this.right.onscroll = this.handleEventRightScroll.bind(this);
72 this.vhandle.onscroll = this.handleEventVhandle.bind(this);
73 break;
74 case "main":
75 this.left.onscroll = this.handleEventLeftScroll.bind(this);
76 this.right.onscroll = this.handleEventRightScroll.bind(this);
77 this.vhandle.onscroll = this.handleEventVhandle.bind(this);
78 break;
79 case "right":
80 this.left.onscroll = this.handleEventLeftScroll.bind(this);
81 this.main.onscroll = this.handleEventMainScroll.bind(this);
82 this.vhandle.onscroll = this.handleEventVhandle.bind(this);
83 break;
84 case "Vhandle":
85 this.left.onscroll = this.handleEventLeftScroll.bind(this);
86 this.main.onscroll = this.handleEventMainScroll.bind(this);
87 this.right.onscroll = this.handleEventRightScroll.bind(this);
88 break;
89 case "Hhandle":
90 this.main.onscroll = this.handleEventMainScroll.bind(this);
91 break;
92 case "wheel":
93 this.left.onscroll = this.handleEventLeftScroll.bind(this);
94 this.main.onscroll = this.handleEventMainScroll.bind(this);
95 this.right.onscroll = this.handleEventRightScroll.bind(this);
96 this.vhandle.onscroll = this.handleEventVhandle.bind(this);
97 break;
98
99 }
100}
175bindIScrollEvents() {
176 // Bind events on iScroll instance
177 this.iScrollBindedEvents = {};
178 this.updateIScrollEvents({}, this.props);
179}
541value: function addClassOnScrollInToView(elements) {
542
543 /** Scroll event callback */
544 function _scrollCallback() {
545
546 function toggleActiveClass(el) {
547 if (_utils.isElementInViewport(el, 0.75)) {
548 el.classList.add('active');
549 } else {
550 el.classList.remove('active');
551 }
552 }
553
554 Array.prototype.forEach.call(elements, toggleActiveClass);
555 }
556
557 /** Throttle default scroll event and listen for optimizedScroll event */
558 _utils.throttleEvent('scroll', 'optimizedScroll');
559 _utils2.w.addEventListener('optimizedScroll', function () {
560 _scrollCallback();
561 });
562 }
137_onScroll(e) {
138 if (this._updateOnScroll) {
139 this.updateScrollbar();
140 } else {
141 this._updateScrollbarLocation();
142 }
143
144 if (this._autohide) {
145 this._updateAutohide();
146 }
147}
333registerScroll(): void {
334 let self = this;
335 this.baseEditor.on('scroll', function() {
336 self.syncScroll(EventDirection.OUTGOING);
337 });
338 this.ownEditor.on('scroll', function() {
339 self.syncScroll(EventDirection.INCOMING);
340 });
341}

Related snippets