lyb-pixi-js 1.8.1 → 1.8.2

package/Components/Custom/LibPixiScrollContainerY.d.ts

@@ -7,6 +7,14 @@ export interface LibPixiScrollContainerYParams {
     height: number;
     /** 滚动内容 */
     scrollContent: Container;
+    /** 是否需要滚动条 */
+    scrollbar?: boolean;
+    /** 滚动靠右坐标 */
+    scrollbarRgiht?: number;
+    /** 滚动条宽度 */
+    scrollbarWidth?: number;
+    /** 滚动条颜色 */
+    scrollbarColor?: string;
 }
 /** @description 支持鼠标滚轮滚动、鼠标拖动、手指滑动，支持惯性滚动及回弹
  * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiScrollContainerY-Y轴滚动容器
@@ -24,12 +32,20 @@ export declare class LibPixiScrollContainerY extends LibPixiContainer {
     private _scrollSpeed;
     /** 是否处于拖动状态 */
     private _isDragging;
+    /** 是否处于滚动状态 */
+    private _scrollbarDragging;
+    /** 滚动条拖动偏移量 */
+    private _scrollbarDragOffset;
     /** 滚动容器 */
     _scrollContent: Container;
     /** 遮罩 */
     private _maskGraphics;
     /** 滚动的内容 */
     private _content;
+    /** 滚动条 */
+    private _scrollbar;
+    /** 滚动条颜色 */
+    private _scrollbarColor;
     constructor(params: LibPixiScrollContainerYParams);
     /** @description 设置滚动容器可视区宽高
      * @param width 宽度
@@ -52,4 +68,12 @@ export declare class LibPixiScrollContainerY extends LibPixiContainer {
     private _applyInertia;
     /** @description 限制滚动范围 */
     private _limitScrollRange;
+    /** @description 更新滚动位置 */
+    private _updateScrollbar;
+    /** @description 滚动条按下 */
+    private _onScrollbarDragStart;
+    /** @description 滚动条移动 */
+    private _onScrollbarDragMove;
+    /** @description 滚动条松开 */
+    private _onScrollbarDragEnd;
 }

package/Components/Custom/LibPixiScrollContainerY.js

@@ -1,12 +1,13 @@
-import { Container, Graphics } from "pixi.js";
-import { gsap } from "gsap";
+import { Container } from "pixi.js";
+import { libPixiEvent } from "../../Utils/LibPixiEvent";
 import { LibPixiContainer } from "../Base/LibPixiContainer";
+import { LibPixiRectangle } from "../Base/LibPixiRectangle";
 /** @description 支持鼠标滚轮滚动、鼠标拖动、手指滑动，支持惯性滚动及回弹
  * @link 使用方法：https://www.npmjs.com/package/lyb-pixi-js#LibPixiScrollContainerY-Y轴滚动容器
  */
 export class LibPixiScrollContainerY extends LibPixiContainer {
     constructor(params) {
-        const { width, height, scrollContent } = params;
+        const { width, height, scrollbar = false, scrollContent, scrollbarRgiht, scrollbarWidth = 10, scrollbarColor = "#F8A500", } = params;
         super(width, height);
         /** 开始位置 */
         this._startY = 0;
@@ -20,26 +21,47 @@ export class LibPixiScrollContainerY extends LibPixiContainer {
         this._scrollSpeed = 200;
         /** 是否处于拖动状态 */
         this._isDragging = false;
+        /** 是否处于滚动状态 */
+        this._scrollbarDragging = false;
+        /** 滚动条拖动偏移量 */
+        this._scrollbarDragOffset = 0;
         this._scrollContent = scrollContent;
+        this._scrollbarColor = scrollbarColor;
         // 创建内容容器
         this._content = new Container();
         this.addChild(this._content);
         this._content.addChild(this._scrollContent);
         // 创建遮罩
-        this._maskGraphics = new Graphics();
+        this._maskGraphics = new LibPixiRectangle(width, height, "#000");
         this.addChild(this._maskGraphics);
-        this._maskGraphics.clear();
-        this._maskGraphics.beginFill(0x000000);
-        this._maskGraphics.drawRect(0, 0, width, height);
-        this._maskGraphics.endFill();
         this.mask = this._maskGraphics;
+        // 创建滚动条
+        this._scrollbar = new LibPixiRectangle(scrollbarWidth, height, this._scrollbarColor);
+        this._scrollbar.x = width - (scrollbarRgiht || scrollbarWidth);
+        this.addChild(this._scrollbar);
+        this._scrollbar.visible = scrollbar;
+        this._updateScrollbar();
+        libPixiEvent(this._scrollbar, "pointerdown", this._onScrollbarDragStart.bind(this));
         // 添加事件监听
         this.eventMode = "static";
         this.on("pointerdown", this._onDragStart, this);
-        this.on("pointermove", this._onDragMove, this);
-        this.on("pointerup", this._onDragEnd, this);
-        this.on("pointerupoutside", this._onDragEnd, this);
-        this.on("wheel", this._onWheelScroll, this);
+        libPixiEvent(this, "pointerdown", (event) => {
+            this._onDragStart(event);
+        });
+        libPixiEvent(this, "pointermove", (event) => {
+            this._onScrollbarDragMove(event);
+            this._onDragMove(event);
+        });
+        libPixiEvent(this, "pointerup", (event) => {
+            this._onScrollbarDragEnd(event);
+            this._onDragEnd();
+        });
+        libPixiEvent(this, "wheel", (event) => {
+            this._onWheelScroll(event);
+        });
+        libPixiEvent(this, "pointerupoutside", () => {
+            this._onDragEnd();
+        });
     }
     /** @description 设置滚动容器可视区宽高
      * @param width 宽度
@@ -81,10 +103,12 @@ export class LibPixiScrollContainerY extends LibPixiContainer {
             const newPosition = position.y - this._startY;
             this._content.y = newPosition;
         }
+        this._updateScrollbar();
     }
     /** @description 拖动结束 */
     _onDragEnd() {
         this._isDragging = false;
+        this._scrollbarDragging = false;
         const currentTime = Date.now();
         const deltaTime = currentTime - this._startTime; // 计算停留时间
         if (deltaTime < 250) {
@@ -116,6 +140,9 @@ export class LibPixiScrollContainerY extends LibPixiContainer {
             duration: 0.25,
             ease: "power1.out",
             y,
+            onUpdate: () => {
+                this._updateScrollbar();
+            },
         });
     }
     /** @description 惯性动画 */
@@ -124,7 +151,10 @@ export class LibPixiScrollContainerY extends LibPixiContainer {
             y: this._content.y + this._velocity * 250,
             duration: 0.5,
             ease: "power1.out",
-            onUpdate: this._limitScrollRange.bind(this),
+            onUpdate: () => {
+                this._limitScrollRange();
+                this._updateScrollbar();
+            },
         });
     }
     /** @description 限制滚动范围 */
@@ -135,6 +165,9 @@ export class LibPixiScrollContainerY extends LibPixiContainer {
                 duration: 0.75,
                 y: 0,
                 ease: "elastic.out",
+                onUpdate: () => {
+                    this._updateScrollbar();
+                },
             });
         }
         // 如果滚动距离大于内容高度减去遮罩高度
@@ -147,6 +180,9 @@ export class LibPixiScrollContainerY extends LibPixiContainer {
                     duration: 0.75,
                     y,
                     ease: "elastic.out",
+                    onUpdate: () => {
+                        this._updateScrollbar();
+                    },
                 });
             }
             // 否则静止不动
@@ -154,8 +190,59 @@ export class LibPixiScrollContainerY extends LibPixiContainer {
                 gsap.to(this._content, {
                     duration: 0.25,
                     y: 0,
+                    onUpdate: () => {
+                        this._updateScrollbar();
+                    },
                 });
             }
         }
     }
+    /** @description 更新滚动位置 */
+    _updateScrollbar() {
+        const viewHeight = this._maskGraphics.height;
+        const contentHeight = this._content.height;
+        if (contentHeight <= viewHeight) {
+            this._scrollbar.visible = false;
+            return;
+        }
+        this._scrollbar.visible = true;
+        const ratio = viewHeight / contentHeight;
+        const barHeight = viewHeight * ratio;
+        const maxScrollY = contentHeight - viewHeight;
+        const scrollY = Math.min(Math.max(-this._content.y, 0), maxScrollY);
+        const barY = (scrollY / maxScrollY) * (viewHeight - barHeight);
+        this._scrollbar.clear();
+        this._scrollbar.beginFill(this._scrollbarColor);
+        this._scrollbar.drawRect(0, 0, 10, barHeight);
+        this._scrollbar.endFill();
+        this._scrollbar.y = barY;
+    }
+    /** @description 滚动条按下 */
+    _onScrollbarDragStart(event) {
+        event.stopPropagation();
+        this._scrollbarDragging = true;
+        this._scrollbarDragOffset = event.getLocalPosition(this._scrollbar).y;
+        gsap.killTweensOf(this._content);
+    }
+    /** @description 滚动条移动 */
+    _onScrollbarDragMove(event) {
+        event.stopPropagation();
+        if (!this._scrollbarDragging)
+            return;
+        const localY = event.getLocalPosition(this).y;
+        const viewHeight = this._maskGraphics.height;
+        const contentHeight = this._content.height;
+        const ratio = viewHeight / contentHeight;
+        const barHeight = viewHeight * ratio;
+        const maxBarY = viewHeight - barHeight;
+        const newBarY = Math.min(Math.max(localY - this._scrollbarDragOffset, 0), maxBarY);
+        const scrollY = (newBarY / maxBarY) * (contentHeight - viewHeight);
+        this._content.y = -scrollY;
+        this._updateScrollbar();
+    }
+    /** @description 滚动条松开 */
+    _onScrollbarDragEnd(event) {
+        event.stopPropagation();
+        this._scrollbarDragging = false;
+    }
 }

package/lyb-pixi.js

@@ -1315,7 +1315,7 @@
       var ys = arrObjKeys(obj, inspect2);
       var isPlainObject = gPO ? gPO(obj) === Object.prototype : obj instanceof Object || obj.constructor === Object;
       var protoTag = obj instanceof Object ? "" : "null prototype";
-      var stringTag = !isPlainObject && toStringTag && Object(obj) === obj && toStringTag in obj ? $slice.call(toStr(obj), 8, -1) : protoTag ? "Object" : "";
+      var stringTag = !isPlainObject && toStringTag && Object(obj) === obj && toStringTag in obj ? $slice.call(toStr$1(obj), 8, -1) : protoTag ? "Object" : "";
       var constructorTag = isPlainObject || typeof obj.constructor !== "function" ? "" : obj.constructor.name ? obj.constructor.name + " " : "";
       var tag = constructorTag + (stringTag || protoTag ? "[" + $join.call($concat$1.call([], stringTag || [], protoTag || []), ": ") + "] " : "");
       if (ys.length === 0) {
@@ -1337,25 +1337,25 @@
     return $replace$1.call(String(s2), /"/g, """);
   }
   function isArray$3(obj) {
-    return toStr(obj) === "[object Array]" && (!toStringTag || !(typeof obj === "object" && toStringTag in obj));
+    return toStr$1(obj) === "[object Array]" && (!toStringTag || !(typeof obj === "object" && toStringTag in obj));
   }
   function isDate(obj) {
-    return toStr(obj) === "[object Date]" && (!toStringTag || !(typeof obj === "object" && toStringTag in obj));
+    return toStr$1(obj) === "[object Date]" && (!toStringTag || !(typeof obj === "object" && toStringTag in obj));
   }
   function isRegExp$1(obj) {
-    return toStr(obj) === "[object RegExp]" && (!toStringTag || !(typeof obj === "object" && toStringTag in obj));
+    return toStr$1(obj) === "[object RegExp]" && (!toStringTag || !(typeof obj === "object" && toStringTag in obj));
   }
   function isError(obj) {
-    return toStr(obj) === "[object Error]" && (!toStringTag || !(typeof obj === "object" && toStringTag in obj));
+    return toStr$1(obj) === "[object Error]" && (!toStringTag || !(typeof obj === "object" && toStringTag in obj));
   }
   function isString(obj) {
-    return toStr(obj) === "[object String]" && (!toStringTag || !(typeof obj === "object" && toStringTag in obj));
+    return toStr$1(obj) === "[object String]" && (!toStringTag || !(typeof obj === "object" && toStringTag in obj));
   }
   function isNumber(obj) {
-    return toStr(obj) === "[object Number]" && (!toStringTag || !(typeof obj === "object" && toStringTag in obj));
+    return toStr$1(obj) === "[object Number]" && (!toStringTag || !(typeof obj === "object" && toStringTag in obj));
   }
   function isBoolean(obj) {
-    return toStr(obj) === "[object Boolean]" && (!toStringTag || !(typeof obj === "object" && toStringTag in obj));
+    return toStr$1(obj) === "[object Boolean]" && (!toStringTag || !(typeof obj === "object" && toStringTag in obj));
   }
   function isSymbol(obj) {
     if (hasShammedSymbols) {
@@ -1391,7 +1391,7 @@
   function has$3(obj, key) {
     return hasOwn$1.call(obj, key);
   }
-  function toStr(obj) {
+  function toStr$1(obj) {
     return objectToString.call(obj);
   }
   function nameOf(f2) {
@@ -1700,7 +1700,7 @@
   var uri = URIError;
   var abs$1 = Math.abs;
   var floor$1 = Math.floor;
-  var max$1 = Math.max;
+  var max$2 = Math.max;
   var min$1 = Math.min;
   var pow$1 = Math.pow;
   var round$2 = Math.round;
@@ -1833,102 +1833,78 @@
     Object_getPrototypeOf = $Object2.getPrototypeOf || null;
     return Object_getPrototypeOf;
   }
-  var implementation;
-  var hasRequiredImplementation;
-  function requireImplementation() {
-    if (hasRequiredImplementation)
-      return implementation;
-    hasRequiredImplementation = 1;
-    var ERROR_MESSAGE = "Function.prototype.bind called on incompatible ";
-    var toStr2 = Object.prototype.toString;
-    var max2 = Math.max;
-    var funcType = "[object Function]";
-    var concatty = function concatty2(a2, b2) {
-      var arr = [];
-      for (var i2 = 0; i2 < a2.length; i2 += 1) {
-        arr[i2] = a2[i2];
-      }
-      for (var j2 = 0; j2 < b2.length; j2 += 1) {
-        arr[j2 + a2.length] = b2[j2];
-      }
-      return arr;
-    };
-    var slicy = function slicy2(arrLike, offset) {
-      var arr = [];
-      for (var i2 = offset || 0, j2 = 0; i2 < arrLike.length; i2 += 1, j2 += 1) {
-        arr[j2] = arrLike[i2];
-      }
-      return arr;
-    };
-    var joiny = function(arr, joiner) {
-      var str = "";
-      for (var i2 = 0; i2 < arr.length; i2 += 1) {
-        str += arr[i2];
-        if (i2 + 1 < arr.length) {
-          str += joiner;
-        }
+  var ERROR_MESSAGE = "Function.prototype.bind called on incompatible ";
+  var toStr = Object.prototype.toString;
+  var max$1 = Math.max;
+  var funcType = "[object Function]";
+  var concatty = function concatty2(a2, b2) {
+    var arr = [];
+    for (var i2 = 0; i2 < a2.length; i2 += 1) {
+      arr[i2] = a2[i2];
+    }
+    for (var j2 = 0; j2 < b2.length; j2 += 1) {
+      arr[j2 + a2.length] = b2[j2];
+    }
+    return arr;
+  };
+  var slicy = function slicy2(arrLike, offset) {
+    var arr = [];
+    for (var i2 = offset || 0, j2 = 0; i2 < arrLike.length; i2 += 1, j2 += 1) {
+      arr[j2] = arrLike[i2];
+    }
+    return arr;
+  };
+  var joiny = function(arr, joiner) {
+    var str = "";
+    for (var i2 = 0; i2 < arr.length; i2 += 1) {
+      str += arr[i2];
+      if (i2 + 1 < arr.length) {
+        str += joiner;
       }
-      return str;
-    };
-    implementation = function bind2(that) {
-      var target = this;
-      if (typeof target !== "function" || toStr2.apply(target) !== funcType) {
-        throw new TypeError(ERROR_MESSAGE + target);
-      }
-      var args = slicy(arguments, 1);
-      var bound;
-      var binder = function() {
-        if (this instanceof bound) {
-          var result = target.apply(
-            this,
-            concatty(args, arguments)
-          );
-          if (Object(result) === result) {
-            return result;
-          }
-          return this;
-        }
-        return target.apply(
-          that,
+    }
+    return str;
+  };
+  var implementation$1 = function bind2(that) {
+    var target = this;
+    if (typeof target !== "function" || toStr.apply(target) !== funcType) {
+      throw new TypeError(ERROR_MESSAGE + target);
+    }
+    var args = slicy(arguments, 1);
+    var bound;
+    var binder = function() {
+      if (this instanceof bound) {
+        var result = target.apply(
+          this,
           concatty(args, arguments)
         );
-      };
-      var boundLength = max2(0, target.length - args.length);
-      var boundArgs = [];
-      for (var i2 = 0; i2 < boundLength; i2++) {
-        boundArgs[i2] = "$" + i2;
-      }
-      bound = Function("binder", "return function (" + joiny(boundArgs, ",") + "){ return binder.apply(this,arguments); }")(binder);
-      if (target.prototype) {
-        var Empty = function Empty2() {
-        };
-        Empty.prototype = target.prototype;
-        bound.prototype = new Empty();
-        Empty.prototype = null;
+        if (Object(result) === result) {
+          return result;
+        }
+        return this;
       }
-      return bound;
+      return target.apply(
+        that,
+        concatty(args, arguments)
+      );
     };
-    return implementation;
-  }
-  var functionBind;
-  var hasRequiredFunctionBind;
-  function requireFunctionBind() {
-    if (hasRequiredFunctionBind)
-      return functionBind;
-    hasRequiredFunctionBind = 1;
-    var implementation2 = requireImplementation();
-    functionBind = Function.prototype.bind || implementation2;
-    return functionBind;
-  }
-  var functionCall;
-  var hasRequiredFunctionCall;
-  function requireFunctionCall() {
-    if (hasRequiredFunctionCall)
-      return functionCall;
-    hasRequiredFunctionCall = 1;
-    functionCall = Function.prototype.call;
-    return functionCall;
-  }
+    var boundLength = max$1(0, target.length - args.length);
+    var boundArgs = [];
+    for (var i2 = 0; i2 < boundLength; i2++) {
+      boundArgs[i2] = "$" + i2;
+    }
+    bound = Function("binder", "return function (" + joiny(boundArgs, ",") + "){ return binder.apply(this,arguments); }")(binder);
+    if (target.prototype) {
+      var Empty = function Empty2() {
+      };
+      Empty.prototype = target.prototype;
+      bound.prototype = new Empty();
+      Empty.prototype = null;
+    }
+    return bound;
+  };
+  var implementation = implementation$1;
+  var functionBind = Function.prototype.bind || implementation;
+  var functionCall = Function.prototype.call;
   var functionApply;
   var hasRequiredFunctionApply;
   function requireFunctionApply() {
@@ -1939,14 +1915,14 @@
     return functionApply;
   }
   var reflectApply = typeof Reflect !== "undefined" && Reflect && Reflect.apply;
-  var bind$2 = requireFunctionBind();
+  var bind$2 = functionBind;
   var $apply$1 = requireFunctionApply();
-  var $call$2 = requireFunctionCall();
+  var $call$2 = functionCall;
   var $reflectApply = reflectApply;
   var actualApply = $reflectApply || bind$2.call($call$2, $apply$1);
-  var bind$1 = requireFunctionBind();
+  var bind$1 = functionBind;
   var $TypeError$4 = type;
-  var $call$1 = requireFunctionCall();
+  var $call$1 = functionCall;
   var $actualApply = actualApply;
   var callBindApplyHelpers = function callBindBasic2(args) {
     if (args.length < 1 || typeof args[0] !== "function") {
@@ -2015,7 +1991,7 @@
     hasRequiredHasown = 1;
     var call = Function.prototype.call;
     var $hasOwn = Object.prototype.hasOwnProperty;
-    var bind2 = requireFunctionBind();
+    var bind2 = functionBind;
     hasown = bind2.call(call, $hasOwn);
     return hasown;
   }
@@ -2030,7 +2006,7 @@
   var $URIError = uri;
   var abs = abs$1;
   var floor = floor$1;
-  var max = max$1;
+  var max = max$2;
   var min = min$1;
   var pow = pow$1;
   var round$1 = round$2;
@@ -2064,7 +2040,7 @@
   var $ObjectGPO = requireObject_getPrototypeOf();
   var $ReflectGPO = requireReflect_getPrototypeOf();
   var $apply = requireFunctionApply();
-  var $call = requireFunctionCall();
+  var $call = functionCall;
   var needsEval = {};
   var TypedArray = typeof Uint8Array === "undefined" || !getProto ? undefined$1 : getProto(Uint8Array);
   var INTRINSICS = {
@@ -2234,7 +2210,7 @@
     "%WeakMapPrototype%": ["WeakMap", "prototype"],
     "%WeakSetPrototype%": ["WeakSet", "prototype"]
   };
-  var bind = requireFunctionBind();
+  var bind = functionBind;
   var hasOwn = requireHasown();
   var $concat = bind.call($call, Array.prototype.concat);
   var $spliceApply = bind.call($apply, Array.prototype.splice);
@@ -25775,7 +25751,7 @@ void main(void)\r
     return _isFunction(value) || _isString(value);
   }, _isTypedArray = typeof ArrayBuffer === "function" && ArrayBuffer.isView || function() {
   }, _isArray = Array.isArray, _strictNumExp = /(?:-?\.?\d|\.)+/gi, _numExp = /[-+=.]*\d+[.e\-+]*\d*[e\-+]*\d*/g, _numWithUnitExp = /[-+=.]*\d+[.e-]*\d*[a-z%]*/g, _complexStringNumExp = /[-+=.]*\d+\.?\d*(?:e-|e\+)?\d*/gi, _relExp = /[+-]=-?[.\d]+/, _delimitedValueExp = /[^,'"\[\]\s]+/gi, _unitExp = /^[+\-=e\s\d]*\d+[.\d]*([a-z]*|%)\s*$/i, _globalTimeline, _win$1, _coreInitted, _doc$1, _globals = {}, _installScope = {}, _coreReady, _install = function _install2(scope) {
-    return (_installScope = _merge(scope, _globals)) && gsap;
+    return (_installScope = _merge(scope, _globals)) && gsap$1;
   }, _missingPlugin = function _missingPlugin2(property, value) {
     return console.warn("Invalid property", property, "set to", value, "Missing plugin? gsap.registerPlugin()");
   }, _warn = function _warn2(message, suppress) {
@@ -26403,7 +26379,7 @@ void main(void)\r
         name = (name === "css" ? "CSS" : name.charAt(0).toUpperCase() + name.substr(1)) + "Plugin";
       }
       _addGlobal(name, Plugin);
-      config.register && config.register(gsap, Plugin, PropTween);
+      config.register && config.register(gsap$1, Plugin, PropTween);
     } else {
       _registerPluginQueue.push(config);
     }
@@ -26580,8 +26556,8 @@ void main(void)\r
           if (!_coreInitted && _windowExists$1()) {
             _win$1 = _coreInitted = window;
             _doc$1 = _win$1.document || {};
-            _globals.gsap = gsap;
-            (_win$1.gsapVersions || (_win$1.gsapVersions = [])).push(gsap.version);
+            _globals.gsap = gsap$1;
+            (_win$1.gsapVersions || (_win$1.gsapVersions = [])).push(gsap$1.version);
             _install(_installScope || _win$1.GreenSockGlobals || !_win$1.gsap && _win$1 || {});
             _registerPluginQueue.forEach(_createPlugin);
           }
@@ -28447,7 +28423,7 @@ void main(void)\r
       target = toArray(target);
       if (target.length > 1) {
         var setters = target.map(function(t2) {
-          return gsap.quickSetter(t2, property, unit);
+          return gsap$1.quickSetter(t2, property, unit);
         }), l2 = setters.length;
         return function(value) {
           var i2 = l2;
@@ -28470,7 +28446,7 @@ void main(void)\r
     },
     quickTo: function quickTo(target, property, vars) {
       var _merge2;
-      var tween = gsap.to(target, _merge((_merge2 = {}, _merge2[property] = "+=0.1", _merge2.paused = true, _merge2), vars || {})), func = function func2(value, start, startIsRelative) {
+      var tween = gsap$1.to(target, _merge((_merge2 = {}, _merge2[property] = "+=0.1", _merge2.paused = true, _merge2), vars || {})), func = function func2(value, start, startIsRelative) {
         return tween.resetTo(property, value, start, startIsRelative);
       };
       func.tween = tween;
@@ -28656,7 +28632,7 @@ void main(void)\r
       }
     };
   };
-  var gsap = _gsap.registerPlugin({
+  var gsap$1 = _gsap.registerPlugin({
     name: "attr",
     init: function init2(target, vars, tween, index, targets) {
       var p2, pt, v2;
@@ -28685,7 +28661,7 @@ void main(void)\r
       }
     }
   }, _buildModifierPlugin("roundProps", _roundModifier), _buildModifierPlugin("modifiers"), _buildModifierPlugin("snap", snap)) || _gsap;
-  Tween.version = Timeline$1.version = gsap.version = "3.12.5";
+  Tween.version = Timeline$1.version = gsap$1.version = "3.12.5";
   _coreReady = 1;
   _windowExists$1() && _wake();
   _easeMap.Power0;
@@ -28813,7 +28789,7 @@ void main(void)\r
       revert: _revertStyle,
       save: _saveStyle
     };
-    target._gsap || gsap.core.getCache(target);
+    target._gsap || gsap$1.core.getCache(target);
     properties && properties.split(",").forEach(function(p2) {
       return saver.save(p2);
     });
@@ -28846,7 +28822,7 @@ void main(void)\r
       _transformOriginProp = _transformProp + "Origin";
       _tempDiv.style.cssText = "border-width:0;line-height:0;position:absolute;padding:0";
       _supports3D = !!_checkPropPrefix("perspective");
-      _reverting = gsap.core.reverting;
+      _reverting = gsap$1.core.reverting;
       _pluginInitted = 1;
     }
   }, _getBBoxHack = function _getBBoxHack2(swapIfPossible) {
@@ -29720,8 +29696,8 @@ void main(void)\r
       _getMatrix
     }
   };
-  gsap.utils.checkPrefix = _checkPropPrefix;
-  gsap.core.getStyleSaver = _getStyleSaver;
+  gsap$1.utils.checkPrefix = _checkPropPrefix;
+  gsap$1.core.getStyleSaver = _getStyleSaver;
   (function(positionAndScale, rotation, others, aliases) {
     var all = _forEachName(positionAndScale + "," + rotation + "," + others, function(name) {
       _transformProps[name] = 1;
@@ -29739,8 +29715,8 @@ void main(void)\r
   _forEachName("x,y,z,top,right,bottom,left,width,height,fontSize,padding,margin,perspective", function(name) {
     _config.units[name] = "px";
   });
-  gsap.registerPlugin(CSSPlugin);
-  var gsapWithCSS = gsap.registerPlugin(CSSPlugin) || gsap;
+  gsap$1.registerPlugin(CSSPlugin);
+  var gsapWithCSS = gsap$1.registerPlugin(CSSPlugin) || gsap$1;
   gsapWithCSS.core.Tween;
   class LibPixiRectBgColor extends Graphics {
     constructor(options) {
@@ -49245,9 +49221,28 @@ void main(void)\r
       }
     }
   }
+  class LibPixiRectangle extends Graphics {
+    constructor(width, height, color) {
+      super();
+      this.beginFill(color || 0);
+      this.drawRect(0, 0, width, height);
+      this.endFill();
+      if (!color) {
+        this.alpha = 0;
+      }
+    }
+  }
   class LibPixiScrollContainerY extends LibPixiContainer {
     constructor(params) {
-      const { width, height, scrollContent } = params;
+      const {
+        width,
+        height,
+        scrollbar = false,
+        scrollContent,
+        scrollbarRgiht,
+        scrollbarWidth = 10,
+        scrollbarColor = "#F8A500"
+      } = params;
       super(width, height);
       this._startY = 0;
       this._velocity = 0;
@@ -49255,23 +49250,49 @@ void main(void)\r
       this._startPosition = 0;
       this._scrollSpeed = 200;
       this._isDragging = false;
+      this._scrollbarDragging = false;
+      this._scrollbarDragOffset = 0;
       this._scrollContent = scrollContent;
+      this._scrollbarColor = scrollbarColor;
       this._content = new Container();
       this.addChild(this._content);
       this._content.addChild(this._scrollContent);
-      this._maskGraphics = new Graphics();
+      this._maskGraphics = new LibPixiRectangle(width, height, "#000");
       this.addChild(this._maskGraphics);
-      this._maskGraphics.clear();
-      this._maskGraphics.beginFill(0);
-      this._maskGraphics.drawRect(0, 0, width, height);
-      this._maskGraphics.endFill();
       this.mask = this._maskGraphics;
+      this._scrollbar = new LibPixiRectangle(
+        scrollbarWidth,
+        height,
+        this._scrollbarColor
+      );
+      this._scrollbar.x = width - (scrollbarRgiht || scrollbarWidth);
+      this.addChild(this._scrollbar);
+      this._scrollbar.visible = scrollbar;
+      this._updateScrollbar();
+      libPixiEvent(
+        this._scrollbar,
+        "pointerdown",
+        this._onScrollbarDragStart.bind(this)
+      );
       this.eventMode = "static";
       this.on("pointerdown", this._onDragStart, this);
-      this.on("pointermove", this._onDragMove, this);
-      this.on("pointerup", this._onDragEnd, this);
-      this.on("pointerupoutside", this._onDragEnd, this);
-      this.on("wheel", this._onWheelScroll, this);
+      libPixiEvent(this, "pointerdown", (event) => {
+        this._onDragStart(event);
+      });
+      libPixiEvent(this, "pointermove", (event) => {
+        this._onScrollbarDragMove(event);
+        this._onDragMove(event);
+      });
+      libPixiEvent(this, "pointerup", (event) => {
+        this._onScrollbarDragEnd(event);
+        this._onDragEnd();
+      });
+      libPixiEvent(this, "wheel", (event) => {
+        this._onWheelScroll(event);
+      });
+      libPixiEvent(this, "pointerupoutside", () => {
+        this._onDragEnd();
+      });
     }
     /** @description 设置滚动容器可视区宽高
      * @param width 宽度
@@ -49286,7 +49307,7 @@ void main(void)\r
     }
     /** @description 返回顶部 */
     scrollToTop() {
-      gsapWithCSS.killTweensOf(this._content);
+      gsap.killTweensOf(this._content);
       this._content.y = 0;
     }
     /** @description 往滚动内容添加元素 */
@@ -49303,7 +49324,7 @@ void main(void)\r
       this._velocity = 0;
       this._startTime = Date.now();
       this._startPosition = this._content.y;
-      gsapWithCSS.killTweensOf(this._content);
+      gsap.killTweensOf(this._content);
     }
     /** @description 拖动 */
     _onDragMove(event) {
@@ -49312,10 +49333,12 @@ void main(void)\r
         const newPosition = position.y - this._startY;
         this._content.y = newPosition;
       }
+      this._updateScrollbar();
     }
     /** @description 拖动结束 */
     _onDragEnd() {
       this._isDragging = false;
+      this._scrollbarDragging = false;
       const currentTime = Date.now();
       const deltaTime = currentTime - this._startTime;
       if (deltaTime < 250) {
@@ -49336,45 +49359,111 @@ void main(void)\r
       } else if (Math.abs(y2) >= this._content.height - this._maskGraphics.height) {
         y2 = -(this._content.height - this._maskGraphics.height);
       }
-      gsapWithCSS.to(this._content, {
+      gsap.to(this._content, {
         duration: 0.25,
         ease: "power1.out",
-        y: y2
+        y: y2,
+        onUpdate: () => {
+          this._updateScrollbar();
+        }
       });
     }
     /** @description 惯性动画 */
     _applyInertia() {
-      gsapWithCSS.to(this._content, {
+      gsap.to(this._content, {
         y: this._content.y + this._velocity * 250,
         duration: 0.5,
         ease: "power1.out",
-        onUpdate: this._limitScrollRange.bind(this)
+        onUpdate: () => {
+          this._limitScrollRange();
+          this._updateScrollbar();
+        }
       });
     }
     /** @description 限制滚动范围 */
     _limitScrollRange() {
       if (this._content.y > 0) {
-        gsapWithCSS.to(this._content, {
+        gsap.to(this._content, {
           duration: 0.75,
           y: 0,
-          ease: "elastic.out"
+          ease: "elastic.out",
+          onUpdate: () => {
+            this._updateScrollbar();
+          }
         });
       } else if (Math.abs(this._content.y) >= this._content.height - this._maskGraphics.height) {
         if (this._content.height > this._maskGraphics.height) {
           const y2 = -(this._content.height - this._maskGraphics.height);
-          gsapWithCSS.to(this._content, {
+          gsap.to(this._content, {
             duration: 0.75,
             y: y2,
-            ease: "elastic.out"
+            ease: "elastic.out",
+            onUpdate: () => {
+              this._updateScrollbar();
+            }
           });
         } else {
-          gsapWithCSS.to(this._content, {
+          gsap.to(this._content, {
             duration: 0.25,
-            y: 0
+            y: 0,
+            onUpdate: () => {
+              this._updateScrollbar();
+            }
           });
         }
       }
     }
+    /** @description 更新滚动位置 */
+    _updateScrollbar() {
+      const viewHeight = this._maskGraphics.height;
+      const contentHeight = this._content.height;
+      if (contentHeight <= viewHeight) {
+        this._scrollbar.visible = false;
+        return;
+      }
+      this._scrollbar.visible = true;
+      const ratio = viewHeight / contentHeight;
+      const barHeight = viewHeight * ratio;
+      const maxScrollY = contentHeight - viewHeight;
+      const scrollY = Math.min(Math.max(-this._content.y, 0), maxScrollY);
+      const barY = scrollY / maxScrollY * (viewHeight - barHeight);
+      this._scrollbar.clear();
+      this._scrollbar.beginFill(this._scrollbarColor);
+      this._scrollbar.drawRect(0, 0, 10, barHeight);
+      this._scrollbar.endFill();
+      this._scrollbar.y = barY;
+    }
+    /** @description 滚动条按下 */
+    _onScrollbarDragStart(event) {
+      event.stopPropagation();
+      this._scrollbarDragging = true;
+      this._scrollbarDragOffset = event.getLocalPosition(this._scrollbar).y;
+      gsap.killTweensOf(this._content);
+    }
+    /** @description 滚动条移动 */
+    _onScrollbarDragMove(event) {
+      event.stopPropagation();
+      if (!this._scrollbarDragging)
+        return;
+      const localY = event.getLocalPosition(this).y;
+      const viewHeight = this._maskGraphics.height;
+      const contentHeight = this._content.height;
+      const ratio = viewHeight / contentHeight;
+      const barHeight = viewHeight * ratio;
+      const maxBarY = viewHeight - barHeight;
+      const newBarY = Math.min(
+        Math.max(localY - this._scrollbarDragOffset, 0),
+        maxBarY
+      );
+      const scrollY = newBarY / maxBarY * (contentHeight - viewHeight);
+      this._content.y = -scrollY;
+      this._updateScrollbar();
+    }
+    /** @description 滚动条松开 */
+    _onScrollbarDragEnd(event) {
+      event.stopPropagation();
+      this._scrollbarDragging = false;
+    }
   }
   const LibJsLerp = (start, end, value) => {
     const t2 = Math.min(Math.max(value, 0), 1);
@@ -54876,17 +54965,6 @@ void main(void){
       }
     }
   }
-  class LibPixiRectangle extends Graphics {
-    constructor(width, height, color) {
-      super();
-      this.beginFill(color || 0);
-      this.drawRect(0, 0, width, height);
-      this.endFill();
-      if (!color) {
-        this.alpha = 0;
-      }
-    }
-  }
   class LibPixiPolygon extends Graphics {
     constructor(points, color) {
       super();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lyb-pixi-js",
-  "version": "1.8.1",
+  "version": "1.8.2",
   "description": "自用Pixi.JS方法库",
   "license": "ISC",
   "exports": {