Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

self-scroll

Package Overview
Dependencies
Maintainers
1
Versions
4
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

self-scroll - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

demo-index-static.html

40

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 @@

{
"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",

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc