原生 自动滚动的滚动条，封装到class,还没测

原生 自动滚动的滚动条，封装到class,还没测

 

class Scroll {
  contentHtml = null;
  contentBox = null;
  scorllBar = null;
  speed = 1;
  delay = 1;
  t = null;
  tip = null;

  constructor(id, data) {
    this.id = id;
    this.box = doc.getElementById(this.id);
    // this.contentHtml = null;
    // this.contentBox = null;
    // this.scorllBar = null;
    this.data = data || {};
    this.scorllLineWidth = this.data.lineWidth || 6;
    this.contentText = this.data.content || "";
    this.color = this.data.color || "red";
    this.lineColor = this.data.lineColor || "blue";
    // this.speed = 1;
    this.oRealHeight = 0;
    this.oSeeHeight = this.box.offsetHeight;
    this.oScoHeight = 0;
    // this.t = null;
    this.init();
  }
  init() {
    console.log("滚动条初始化");
    this.initThrow();
    this.initBoxStyle();
    this.addContent();
  }
  initThrow() {
    if (this.box.offsetHeight <= 0) {
      throw "必须要有准确的高度";
    }
    if (this.box.offsetWidth <= 0) {
      throw "必须要有准确的宽度";
    }
  }
  initBoxStyle() {
    Object.assign(this.box.style, {
      position: "relative",
    });
  }
  addScroll() {
    var scrollBox = doc.createElement("p");
    scrollBox.className = "scorllLine";
    var allScrollStyle = {
      top: "0",
      position: "absolute",
      //   right: -(this.scorllLineWidth / 2) + "px",
    };
    Object.assign(
      scrollBox.style,
      {
        height: "100%",
        width: this.scorllLineWidth / 3 + "px",
        background: this.lineColor,
        // right: "5px",
      },
      allScrollStyle
    );
    this.scorllBar = doc.createElement("i");
    Object.assign(
      // 此处修改滚动块的样式
      this.scorllBar.style,
      {
        height: (this.oSeeHeight / this.oRealHeight).toFixed(2) * 100 + "%",
        width: this.scorllLineWidth * 2 + "px",
        background: this.color,
        display: "block",
        // right: "-5px"
      },
      allScrollStyle
    );
    // this.tip = doc.createElement('img');
    // this.tip.className = "toTop";
    // Object.assign(
    //   this.tip.style,{
    //     width: '14px',
    //     height: '90px',
    //     position: "absolute",
    //     top: "377px",
    //     right: '-6px'
    //   }
    // )
    // this.tip.src = "../images/detailTemplate/tip.png"
    // scrollBox.appendChild(this.tip);
    scrollBox.appendChild(this.scorllBar);
    this.box.appendChild(scrollBox);
  }
  addContent() {
    this.contentBox = doc.createElement("div");
    Object.assign(this.contentBox.style, {
      position: "absolute",
      width: this.box.offsetWidth - this.scorllLineWidth + "px",
      left: 0,
      overflow: "hidden",
      height: "100%",
      // background: "#000",
    });
    this.contentHtml = doc.createElement("div");
    Object.assign(this.contentHtml.style, {
      width: "100%",
    });
    this.contentHtml.innerHTML = this.contentText;
    this.contentBox.appendChild(this.contentHtml);

    this.box.appendChild(this.contentBox);
    this.oRealHeight = this.contentHtml.scrollHeight;
    this.oScoHeight = this.oRealHeight - this.oSeeHeight;

    this.oScoHeight > 0 && this.addScroll();
  }
  marquee(speed, type) {
    if (this.t) {
      clearInterval(this.t);
      this.t = null;
    }
    this.t = setInterval(this.scrolling.bind(this, type), speed);
  }
  changeScroll() {
    this.scorllBar.style.top =
      (this.contentBox.scrollTop / this.contentHtml.scrollHeight) * 100 + "%";
  }
  //   toTop() {
  //     this.stop();
  //     this.contentBox.scrollTop = 0;
  //     this.changeScroll();
  //   }
  //   stop() {
  //     if (this.t) {
  //       clearInterval(this.t);
  //       this.t = null;
  //     }
  //   }
  scrolling(type) {
    switch (type) {
      case "up":
        if (
          this.contentHtml.scrollHeight - this.contentBox.scrollTop <=
          this.contentBox.offsetHeight + 1
        ) {
          clearInterval(this.t);
        } else {
          this.contentBox.scrollTop++;
          //   this.contentBox.scrollTop += this.delay;
          this.changeScroll();
        }
        break;
      case "down":
        if (this.contentBox.scrollTop > 0) {
          this.contentBox.scrollTop--;
          //   this.contentBox.scrollTop -= this.delay;
          this.changeScroll();
        } else {
          clearInterval(this.t);
        }
        break;

      default:
        break;
    }
  }
  up(data) {
    console.log(data);
    this.speed = data.speed || 1;
    this.delay = data.delay || 1;
    this.marquee(this.speed * 10, "up");
  }
  down(data) {
    this.speed = data.speed || 1;
    this.delay = data.delay || 1;
    this.marquee(this.speed * 10, "down");
  }
  roll(typeT, dataT) {
    switch (typeT) {
      case "up":
        this.up(dataT);
        break;
      case "down":
        this.down(dataT);
        break;
      default:
        break;
    }
  }
}

// scrollLine = new ScrollLine("container", {
//     content: mess.content, // 返回的content
//     color: "#e1b113", // 滚动块颜色
//     lineColor: "#e1b113", // 滚动条颜色
//     lineWidth: 6, // 滚动块宽度
// });

// 初始化实例
// this.scrollLine = new Scroll("container", {
//   content: mess.content, // 返回的content
//   color: "#e1b113", // 滚动块颜色
//   lineColor: "#e1b113", // 滚动条颜色
//   lineWidth: 6, // 滚动块宽度
// });