slider support stop parent scroll

cocos/ui/slider.ts

@@ -23,9 +23,9 @@
  THE SOFTWARE.
 */
 
-import { ccclass, help, executionOrder, menu, requireComponent, tooltip, type, slide, range, serializable } from 'cc.decorator';
+import { ccclass, help, executionOrder, menu, requireComponent, tooltip, type, slide, range, serializable, editable } from 'cc.decorator';
 import { EDITOR, USE_XR } from 'internal:constants';
-import { Component, EventHandler } from '../scene-graph';
+import { Component, EventHandler, Node } from '../scene-graph';
 import { UITransform } from '../2d/framework';
 import { EventTouch, Touch } from '../input/types';
 import { Vec3 } from '../core/math';
@@ -35,6 +35,7 @@ import { Sprite } from '../2d/components/sprite';
 import { legacyCC } from '../core/global-exports';
 import { NodeEventType } from '../scene-graph/node-event';
 import { XrUIPressEvent, XrUIPressEventType } from '../xr/event/xr-event-handle';
+import { ScrollView } from './scroll-view';
 
 const _tempPos = new Vec3();
 /**
@@ -147,6 +148,23 @@ export class Slider extends Component {
         this._updateHandlePosition();
     }
 
+    /**
+     * @en
+     * Whether to stop the scroll view of the upper layer of the node when dragging the slider thumb. The default value is false.
+     *
+     * @zh
+     * 拖动滑动器滑块时是否停止节点上层的滚动视图。默认为 false。
+     */
+    @editable
+    @tooltip('i18n:slider.parentStopScroll')
+    get parentStopScroll (): boolean {
+        return this._stopParentScroll;
+    }
+
+    set parentStopScroll (value: boolean) {
+        this._stopParentScroll = value;
+    }
+
     public static Direction = Direction;
 
     /**
@@ -166,7 +184,11 @@ export class Slider extends Component {
     private _direction = Direction.Horizontal;
     @serializable
     private _progress = 0.1;
+    @serializable
+    private _stopParentScroll: boolean = false;
 
+    private _scrollview: ScrollView | null = null;
+    private _scrollviewContentCache: Node | null = null;
     private _offset: Vec3 = new Vec3();
     private _dragging = false;
     private _touchHandle = false;
@@ -229,6 +251,7 @@ export class Slider extends Component {
             handleNode.off(NodeEventType.TOUCH_MOVE, self._onTouchMoved, self);
             handleNode.off(NodeEventType.TOUCH_END, self._onTouchEnded, self);
         }
+        this._scrollview = null;
     }
 
     protected _onHandleDragStart (event?: EventTouch): void {
@@ -254,6 +277,8 @@ export class Slider extends Component {
         if (!this._touchHandle) {
             this._handleSliderLogic(event.touch);
         }
+        this.findParentScrollView(this.node);
+        if (this._stopParentScroll) this.stopParentScroll();
 
         event.propagationStopped = true;
     }
@@ -264,21 +289,26 @@ export class Slider extends Component {
         }
 
         this._handleSliderLogic(event.touch);
+        this.findParentScrollView(this.node);
+        if (this._stopParentScroll) this.stopParentScroll();
         event.propagationStopped = true;
     }
 
     protected _onTouchEnded (event?: EventTouch): void {
         this._dragging = false;
         this._touchHandle = false;
         this._offset = new Vec3();
-
+        this.resumeParentScroll();
+        this._scrollview = null;
         if (event) {
             event.propagationStopped = true;
         }
     }
 
     protected _onTouchCancelled (event?: EventTouch): void {
         this._dragging = false;
+        this.resumeParentScroll();
+        this._scrollview = null;
         if (event) {
             event.propagationStopped = true;
         }
@@ -379,6 +409,30 @@ export class Slider extends Component {
         this._xrHandleProgress(event.hitPoint);
         this._emitSlideEvent();
     }
+
+    public stopParentScroll (): void {
+        if (this._scrollview) {
+            this._scrollview.content = null;
+        }
+    }
+
+    public resumeParentScroll (): void {
+        if (this._scrollview) {
+            this._scrollview.content = this._scrollviewContentCache;
+        }
+    }
+
+    protected findParentScrollView (node: Node): void {
+        const p = node.parent;
+        if (p && !this._scrollview) {
+            this._scrollview = p.getComponent(ScrollView);
+            if (!this._scrollview) {
+                this.findParentScrollView(p);
+            } else {
+                this._scrollviewContentCache = this._scrollview.content;
+            }
+        }
+    }
 }
 
 /**

editor/i18n/en/localization.js

@@ -550,6 +550,7 @@ module.exports = link(mixin({
         handle: 'The "handle" part of the slider',
         direction: 'The slider direction',
         progress: 'The current progress of the slider. The valid value is between 0-1',
+        parentStopScroll: 'Whether to stop the scroll view of the upper layer of the node when dragging the slider thumb. The default value is false.',
         slideEvents: 'The slider events callback',
     },
     trailSegment: {

editor/i18n/zh/localization.js

@@ -537,6 +537,7 @@ module.exports = link(mixin({
         handle: '滑块按钮部件',
         direction: '滑动方向',
         progress: '当前进度值，该数值的区间是 0-1 之间。',
+        parentStopScroll: '拖动滑动器滑块时是否停止节点上层的滚动视图。默认为 false。',
         slideEvents: '滑动器组件事件回调函数',
     },
     trailSegment: {