diff --git a/components/lib/virtualscroller/VirtualScroller.vue b/components/lib/virtualscroller/VirtualScroller.vue
index 2ff4eb548..faa506f74 100644
--- a/components/lib/virtualscroller/VirtualScroller.vue
+++ b/components/lib/virtualscroller/VirtualScroller.vue
@@ -83,8 +83,10 @@ export default {
         numToleratedItems(newValue) {
             this.d_numToleratedItems = newValue;
         },
-        loading(newValue) {
-            this.d_loading = newValue;
+        loading(newValue, oldValue) {
+            if (this.lazy && newValue !== oldValue && newValue !== this.d_loading) {
+                this.d_loading = newValue;
+            }
         },
         items(newValue, oldValue) {
             if (!oldValue || oldValue.length !== (newValue || []).length) {
@@ -506,26 +508,28 @@ export default {
         onScroll(event) {
             this.$emit('scroll', event);
 
-            if (this.delay && this.isPageChanged()) {
+            if (this.delay) {
                 if (this.scrollTimeout) {
                     clearTimeout(this.scrollTimeout);
                 }
 
-                if (!this.d_loading && this.showLoader) {
-                    const { isRangeChanged } = this.onScrollPositionChange(event);
-                    const changed = isRangeChanged || (this.step ? this.isPageChanged() : false);
+                if (this.isPageChanged()) {
+                    if (!this.d_loading && this.showLoader) {
+                        const { isRangeChanged } = this.onScrollPositionChange(event);
+                        const changed = isRangeChanged || (this.step ? this.isPageChanged() : false);
 
-                    changed && (this.d_loading = true);
-                }
-
-                this.scrollTimeout = setTimeout(() => {
-                    this.onScrollChange(event);
-
-                    if (this.d_loading && this.showLoader && (!this.lazy || this.loading === undefined)) {
-                        this.d_loading = false;
-                        this.page = this.getPageByFirst();
+                        changed && (this.d_loading = true);
                     }
-                }, this.delay);
+
+                    this.scrollTimeout = setTimeout(() => {
+                        this.onScrollChange(event);
+
+                        if (this.d_loading && this.showLoader && (!this.lazy || this.loading === undefined)) {
+                            this.d_loading = false;
+                            this.page = this.getPageByFirst();
+                        }
+                    }, this.delay);
+                }
             } else {
                 this.onScrollChange(event);
             }
diff --git a/components/lib/virtualscroller/style/VirtualScrollerStyle.js b/components/lib/virtualscroller/style/VirtualScrollerStyle.js
index e14b74b5a..18453318a 100644
--- a/components/lib/virtualscroller/style/VirtualScrollerStyle.js
+++ b/components/lib/virtualscroller/style/VirtualScrollerStyle.js
@@ -1,65 +1,67 @@
 import BaseStyle from 'primevue/base/style';
 
 const css = `
-.p-virtualscroller {
-    position: relative;
-    overflow: auto;
-    contain: strict;
-    transform: translateZ(0);
-    will-change: scroll-position;
-    outline: 0 none;
-}
+@layer primevue {
+    .p-virtualscroller {
+        position: relative;
+        overflow: auto;
+        contain: strict;
+        transform: translateZ(0);
+        will-change: scroll-position;
+        outline: 0 none;
+    }
 
-.p-virtualscroller-content {
-    position: absolute;
-    top: 0;
-    left: 0;
-    /* contain: content; */
-    min-height: 100%;
-    min-width: 100%;
-    will-change: transform;
-}
+    .p-virtualscroller-content {
+        position: absolute;
+        top: 0;
+        left: 0;
+        /* contain: content; */
+        min-height: 100%;
+        min-width: 100%;
+        will-change: transform;
+    }
 
-.p-virtualscroller-spacer {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 1px;
-    width: 1px;
-    transform-origin: 0 0;
-    pointer-events: none;
-}
+    .p-virtualscroller-spacer {
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 1px;
+        width: 1px;
+        transform-origin: 0 0;
+        pointer-events: none;
+    }
 
-.p-virtualscroller .p-virtualscroller-loader {
-    position: sticky;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-}
+    .p-virtualscroller .p-virtualscroller-loader {
+        position: sticky;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    }
 
-.p-virtualscroller-loader.p-component-overlay {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
+    .p-virtualscroller-loader.p-component-overlay {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
 
-.p-virtualscroller-loading-icon {
-    font-size: 2rem;
-}
+    .p-virtualscroller-loading-icon {
+        font-size: 2rem;
+    }
 
-.p-virtualscroller-loading-icon.p-icon {
-    width: 2rem;
-    height: 2rem;
-}
+    .p-virtualscroller-loading-icon.p-icon {
+        width: 2rem;
+        height: 2rem;
+    }
 
-.p-virtualscroller-horizontal > .p-virtualscroller-content {
-    display: flex;
-}
+    .p-virtualscroller-horizontal > .p-virtualscroller-content {
+        display: flex;
+    }
 
-/* Inline */
-.p-virtualscroller-inline .p-virtualscroller-content {
-    position: static;
+    /* Inline */
+    .p-virtualscroller-inline .p-virtualscroller-content {
+        position: static;
+    }
 }
 `;