self-scroll - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

index.js

@@ -13,3 +13,2 @@ export class Scroll {
         
-
         this._targetP = targetP;
@@ -41,8 +40,20 @@ this._target = target;
 
-        const { s_w, s_bgc, s_contentBg } = scrollOption;
+        let cNodeStyle = {};
+        let pNodeStyle = {};
 
-        this.s_w = s_w;
-        this.s_bgc = s_bgc;
-        this.s_contentBg = s_contentBg;
+        // 根据传入的 scrollOption 初始化滚动条主体元素 / 滚动条背景元素样式组
 
+        for(let item in scrollOption){
+            let thisItem = item.split("_");
+            if(thisItem[0] == 'p'){
+                pNodeStyle[thisItem[1]] = scrollOption[item];
+            }
+            else if(thisItem[0] == 'c'){
+                cNodeStyle[thisItem[1]] = scrollOption[item];
+            }
+        }
+
+        this.cNodeStyle = cNodeStyle;// 当前 Class 类中滚动条主体元素样式组
+        this.pNodeStyle = pNodeStyle;// 当前 Class 类中滚动条背景元素样式组
+
         // 因为 es6 的 Class 中的方法里面的 this 指向为该方法运行时所在的环境，需要用过 bind 重新绑定 this，使其全部指向为当前 Class 类
@@ -90,4 +101,3 @@ this.createScroll = this.createScroll.bind(this);
         let newScrollDom = document.createElement("div");
-        newScrollDom.style.width = this.s_w + "px";
-        // newScrollDom.style.height = this.pNodeH + "px";
+
         newScrollDom.style.height = this.pNodeClientH + "px";
@@ -97,13 +107,17 @@ newScrollDom.style.position = "absolute";
         newScrollDom.style.top = 0;
-        newScrollDom.style.backgroundColor = this.s_bgc;
 
         // 创建滚动条主体元素（高为目标元素 / 目标元素父元素 的比例）
         let newScrollDomCNode = document.createElement("div");
-        newScrollDomCNode.style.width = this.s_w + "px";
 
-        // newScrollDomCNode.style.height = Math.ceil(this.cNodeH / this.pNodeH) + "%";
-        newScrollDomCNode.style.height = (this.pNodeH / this.cNodeH).toFixed(3) * 100 + "%";
+        // 根据初始化的滚动条主体元素 / 滚动条背景元素样式组 为 滚动条主体元素 / 滚动条背景元素设置样式......
 
-        newScrollDomCNode.style.backgroundColor = this.s_contentBg;
+        for(let cStyleItem in _this.cNodeStyle){
+            newScrollDomCNode.style[cStyleItem] = _this.cNodeStyle[cStyleItem];
+        }
 
+        for(let pStyleItem in _this.pNodeStyle){
+            newScrollDom.style[pStyleItem] = _this.pNodeStyle[pStyleItem];
+        }
+
+        newScrollDomCNode.style.height = (this.pNodeH / this.cNodeH).toFixed(3) * 100 + "%";
         newScrollDomCNode.classList.add('scrollC');
@@ -258,2 +272,3 @@ newScrollDom.classList.add('scrollP');
                 _this._targetP.style.overflowY = 'hidden';
+                _this._targetP.style.position = 'relative';
                 _this._targetP.appendChild(_this.createScroll());
@@ -531,2 +546,3 @@
             this._targetP.style.overflowY = 'hidden';
+            this._targetP.style.position = 'relative';
             this._targetP.appendChild(this.createScroll());
@@ -533,0 +549,0 @@

package.json

 {
   "name": "self-scroll",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "You can customize the scroll bar(Compatible with Firefox,IE,Ghrome)",
@@ -5,0 +5,0 @@ "main": "index.js",

Fixed alerts

No README

Quality

Package does not have a README. This may indicate a failed publish or a low quality package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

68028

increased by150.16%

Number of package files

5

increased by150%

Lines of code

1012

increased by105.27%

Number of medium quality alerts

1

decreased by-50%

Number of lines in readme file

100

increased byInfinity%

No dependency changes