如何将我的默认滚动条更改为自定义对象标签？答案

【问题标题】：how can I change my default scrollbar to custom for Object tag?如何将我的默认滚动条更改为自定义对象标签？
【发布时间】：2019-08-27 23:08:08
【问题描述】：

我只想为我的 pdf 查看器（我在对象标签中显示）设置一个新的自定义滚动条，但自定义滚动 css 不能影响对象标签，为什么会这样？对于所有其他标签，自定义滚动 css 会受到影响，我对此没有任何问题，但仅对于对象标签，我需要自定义滚动条。

我尝试了自定义滚动条 css 代码，但它不适用于对象标记，但对于所有其他工作正常。

var openFile = function(event) {
  var input = event.target;

  var reader = new FileReader();
  reader.onload = function() {
    var dataURL = reader.result;
    var output = document.getElementById('output');
    output.data = dataURL;
  };
  reader.readAsDataURL(input.files[0]);
};

<input type='file' onchange='openFile(event)'><br>
<object id='output'></object>

我只想为那个 pdf 查看器对象定制一个滚动设计。

【问题讨论】：

可以分享一下相关的css吗？
已添加，立即查看

标签： javascript html css

【解决方案1】：

将display: block; 添加到您的object CSS 解决了我这边的问题。

我的例子有点不同，我添加了一些内容，因为我没有输出。但是你的语法是正确的，滚动条会显示出来。

var openFile = function(event) {
  var input = event.target;

  var reader = new FileReader();
  reader.onload = function() {
    var dataURL = reader.result;
    var output = document.getElementById('output');
    output.data = dataURL;
  };
  reader.readAsDataURL(input.files[0]);
};

object {
  height: 300px;
  width: 500px;
  display: block;
  overflow: scroll;
}
object::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: #F5F5F5;
}

object::-webkit-scrollbar {
  width: 12px;
  background-color: #F5F5F5;
}

object::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  background-color: #D62929;
}

<input type='file' onchange='openFile(event)'><br>
<object id='output'>
  <div class="example-content">example<br>example<br>example<br>example<br>example<br>example<br>example<br>example<br>example<br>example<br>example<br>example<br>example<br>example<br>example<br>example<br>example<br>example<br>example<br>example<br>example<br>example<br>example</div>
</object>

【讨论】：

没有它现在适用于我加载 pdf 文档的对象标签，我分享我得到的截图，检查一下
'现在不行'你是什么意思？不工作还是工作？
这意味着，它只适用于所有 div 元素和 body 标签，但不适用于 object 标签（见截图），我得到的 object 标签是默认滚动条

【解决方案2】：

::-webkit-scrollbar {
    width: 6px;
    height: 20px;
    padding: 2px 2px 2px 0px;
    background: rgba(0, 0, 0, 0.5);
}

::-webkit-scrollbar-button {
    background: #ffffff;
}

::-webkit-scrollbar-track-piece {
    background: none;
}

::-webkit-scrollbar-thumb {
    background: var(--light-grey1);
    border-radius: 8px;
    border: 2px solid #fff;
}

【讨论】：