美文网首页
css设置滚动条样式

css设置滚动条样式

作者: 依耳私语 | 来源:发表于2018-11-09 13:23 被阅读0次

正常情况下,获取父级div的宽高赋值给子元素的宽高是可以盛放下的。
但在在我的代码中会出现滚动条的问题
html结构:

<div class="imgcentercon" ref="canvasBox" @mousemove="move($event)">
    <canvas id="canvasone" ref="drawRectobject" class="canvasone" width="0" height="0"  @mousedown="down($event)"  @mouseup="up($event)" @mousemove="_mousemove($event)"></canvas>
    <canvas id="canvasXY" ref='canvasXY'  width="0" height="0"></canvas>
    <canvas id="canvastwo" ref="imgCanvas" class="canvasone" width="0" height="0" ></canvas>
    <img id="tulip"  :src="imgurl"  />
</div>

JS结构:

  var cans = this.$refs.imgCanvas;
  var canvas = this.$refs.drawRectobject;
  var canvasXY = this.$refs.canvasXY;
  var parentBox = this.$refs.canvasBox
  var ctx = cans.getContext("2d");
  var img = document.getElementById("tulip");
  console.log(parentBox.clientWidth, parentBox.clientHeight)
  img.onload = function() {
    if(img.width >= parentBox.clientWidth){
      cans.width = canvasXY.width = canvas.width = this.imgWidth =  parentBox.offsetWidth-5     
    }
    if(img.height >= parentBox.clientHeight){
      cans.height = canvasXY.height = canvas.height = this.imgHeight = parentBox.offsetHeight-5
    }
    ctx.drawImage(img, 0, 0, cans.width, cans.height/2);
  }

之前的css(只跳了重要的)

.imgcentercon {
  width: 72%;
  height:100%;
  overflow: scroll;// 此句关键
  float: left;
  background: #ecedee;
  position: relative;
}

之后的css

.imgcentercon::-webkit-scrollbar-track{    /*设置滚动条轨迹 border-radius等*/
display: none;
}
.imgcentercon::-webkit-scrollbar{    /*滚动条整体样式,可设置width, height*/
  display: none;
}
.imgcentercon::-webkit-scrollbar-thumb{   /*设置滚动条内小方块   background-color*/
  display: none;
}

其中的伪类::-webkit-scrollbar-track::-webkit-scrollbar::-webkit-scrollbar-thumb可以消除滚动条。另外可以根据需求完成设置滚动条样式

IE里面设置滚动条样式
body{
 scrollbar-face-color: #1f7ebe;        /*滚动条凸出部分的颜色*/
 scrollbar-highlight-color: #1f7ebe;    /*滚动条空白部分的颜色*/
 scrollbar-shadow-color: #1f7ebe;     /*立体滚动条阴影的颜色*/
 scrollbar-3dlight-color: #1f7ebe;     /*滚动条亮边的([www.111cn.net](http://www.111cn.net/))颜色*/
 scrollbar-arrow-color: #1f7ebe;     /*上下按钮上三角箭头的颜色*/
 scrollbar-track-color: #c1e2f1;     /*滚动条的背景颜色*/
 scrollbar-darkshadow-color: #1f7ebe;     /*滚动条强阴影的颜色*/
 scrollbar-base-color: #1f7ebe;     /*滚动条的基本颜色*/
}

相关文章

网友评论

      本文标题:css设置滚动条样式

      本文链接:https://www.haomeiwen.com/subject/pctoxqtx.html