From f6140c89e9b9e138ae0da5540073539756ae8b13 Mon Sep 17 00:00:00 2001
From: Sherry-hue <37186915+Sherry-hue@users.noreply.github.com>
Date: Mon, 20 Apr 2026 20:19:10 +0800
Subject: [PATCH] fix(web): ensure x-list scrolltolower observer sentinel is
 detectable

---
 .changeset/wild-wolves-love.md                |  7 +++++
 .../__snapshots__/server-e2e.test.ts.snap     |  2 ++
 .../src/elements/XList/x-list.css             | 31 +++++++++++++++++++
 .../src/elements/htmlTemplates.ts             |  2 ++
 .../web-platform/web-elements/src/template.rs |  2 ++
 5 files changed, 44 insertions(+)
 create mode 100644 .changeset/wild-wolves-love.md

diff --git a/.changeset/wild-wolves-love.md b/.changeset/wild-wolves-love.md
new file mode 100644
index 0000000000..181478109b
--- /dev/null
+++ b/.changeset/wild-wolves-love.md
@@ -0,0 +1,7 @@
+---
+"@lynx-js/web-elements": patch
+---
+
+fix: list `bindscrolltolower` may not trigger because the lower threshold
+sentinel had no effective size or offset, causing the bottom
+`IntersectionObserver` to miss the list boundary
diff --git a/packages/web-platform/web-core-e2e/server-tests/__snapshots__/server-e2e.test.ts.snap b/packages/web-platform/web-core-e2e/server-tests/__snapshots__/server-e2e.test.ts.snap
index 13118992ad..0d2da525e3 100644
--- a/packages/web-platform/web-core-e2e/server-tests/__snapshots__/server-e2e.test.ts.snap
+++ b/packages/web-platform/web-core-e2e/server-tests/__snapshots__/server-e2e.test.ts.snap
@@ -73,6 +73,7 @@ exports[`executeTemplate should run lepusCode.root from basic-element-list-basic
                 <div
                   class="observer placeholder-dom"
                   id="upper-threshold-observer"
+                  part="upper-threshold-sentinel"
                 ></div>
               </div>
               <slot part="slot"></slot>
@@ -83,6 +84,7 @@ exports[`executeTemplate should run lepusCode.root from basic-element-list-basic
                 <div
                   class="observer placeholder-dom"
                   id="lower-threshold-observer"
+                  part="lower-threshold-sentinel"
                 ></div>
               </div></div></template></x-list
       ></x-view></div></template
diff --git a/packages/web-platform/web-elements/src/elements/XList/x-list.css b/packages/web-platform/web-elements/src/elements/XList/x-list.css
index 74fc9f4604..e11c42d54e 100644
--- a/packages/web-platform/web-elements/src/elements/XList/x-list.css
+++ b/packages/web-platform/web-elements/src/elements/XList/x-list.css
@@ -157,6 +157,37 @@ x-list[x-enable-scrolltoloweredge-event]::part(lower-threshold-observer) {
   display: flex;
 }
 
+x-list[x-enable-scrolltoupper-event]::part(upper-threshold-sentinel),
+x-list[x-enable-scrolltoupperedge-event]::part(upper-threshold-sentinel),
+x-list[x-enable-scrolltolower-event]::part(lower-threshold-sentinel),
+x-list[x-enable-scrolltoloweredge-event]::part(lower-threshold-sentinel) {
+  flex: 0 0 1px;
+}
+
+x-list[x-enable-scrolltoupper-event]::part(upper-threshold-sentinel),
+x-list[x-enable-scrolltoupperedge-event]::part(upper-threshold-sentinel) {
+  margin-bottom: -1px;
+}
+
+x-list[x-enable-scrolltolower-event]::part(lower-threshold-sentinel),
+x-list[x-enable-scrolltoloweredge-event]::part(lower-threshold-sentinel) {
+  margin-top: -1px;
+  transform: translateY(1px);
+}
+
+x-list[scroll-orientation="horizontal"][x-enable-scrolltoupper-event]::part(upper-threshold-sentinel),
+x-list[scroll-orientation="horizontal"][x-enable-scrolltoupperedge-event]::part(upper-threshold-sentinel) {
+  margin-bottom: 0;
+  margin-right: -1px;
+}
+
+x-list[scroll-orientation="horizontal"][x-enable-scrolltolower-event]::part(lower-threshold-sentinel),
+x-list[scroll-orientation="horizontal"][x-enable-scrolltoloweredge-event]::part(lower-threshold-sentinel) {
+  margin-top: 0;
+  margin-left: -1px;
+  transform: translateX(1px);
+}
+
 x-list::part(lower-threshold-observer) {
   flex-direction: column-reverse;
 }
diff --git a/packages/web-platform/web-elements/src/elements/htmlTemplates.ts b/packages/web-platform/web-elements/src/elements/htmlTemplates.ts
index 6f7a0f0163..e8bc1252ba 100644
--- a/packages/web-platform/web-elements/src/elements/htmlTemplates.ts
+++ b/packages/web-platform/web-elements/src/elements/htmlTemplates.ts
@@ -148,6 +148,7 @@ export const templateXList = `<style>
     <div
       class="observer placeholder-dom"
       id="upper-threshold-observer"
+      part="upper-threshold-sentinel"
     ></div>
   </div>
   <slot part="slot"></slot>
@@ -158,6 +159,7 @@ export const templateXList = `<style>
     <div
       class="observer placeholder-dom"
       id="lower-threshold-observer"
+      part="lower-threshold-sentinel"
     ></div>
   </div>
 </div>`;
diff --git a/packages/web-platform/web-elements/src/template.rs b/packages/web-platform/web-elements/src/template.rs
index fcde536d1a..713229d62a 100644
--- a/packages/web-platform/web-elements/src/template.rs
+++ b/packages/web-platform/web-elements/src/template.rs
@@ -155,6 +155,7 @@ pub const TEMPLATE_X_LIST: &str = r#"<style>
     <div
       class="observer placeholder-dom"
       id="upper-threshold-observer"
+      part="upper-threshold-sentinel"
     ></div>
   </div>
   <slot part="slot"></slot>
@@ -165,6 +166,7 @@ pub const TEMPLATE_X_LIST: &str = r#"<style>
     <div
       class="observer placeholder-dom"
       id="lower-threshold-observer"
+      part="lower-threshold-sentinel"
     ></div>
   </div>
 </div>"#;