更改水平滚动的滑块？

Question

我已经从这里完成了一个水平图片库：How do I allow horizontal scrolling only for a row of images and show overflow, without horizontally scrolling the rest of the page?

我想知道是否还有将底部的滑块更改为纳米滑块？像这样的东西：

我真的很感激一些帮助

Answer 1

在容器上使用overflow-x: auto;（示例中为section）

<section>
  <div class="pic-container">
    <div class="pic-row">
      <img src="1.jpg">
      <img src="2.jpg">
      <img src="3.jpg">
      <img src="4.jpg">
      <img src="5.jpg">
      <img src="6.jpg">
    </div>
  </div>
</section>​

CSS：

body {
   overflow: hidden;
}
section {
  /* The width of your document, I suppose */
  width:600px;
  margin: 0 auto;
  white-space:nowrap; 
  overflow-x: auto;
}
.pic-container {
 /* As large as it needs to be */
  width: 1500px;
}​

Answer 2

如果我理解正确，您想要更改滚动条的样式。如果我是正确的，那并不困难。你应该使用Webkit Scrollbars。 Here's a pretty good article on it.

你可能会想要这样的东西：

＆＃13;

＆＃13;

::-webkit-scrollbar-track:horizontal {
  height: 3px;
  background: gray;
}
::-webkit-scrollbar:horozontal {
  background: white;
}

＆＃13;

＆＃13;

＆＃13;

想，我对此并不完全确定。已经有一段时间了，因为我需要设置滚动条样式。

注意：因为这是webkit，所以我不知道在Firefox中工作（或者可能是资源管理器，不确定），唯一的方法就是使用javascript。