如何在滚动框外制作向下滚动和向上滚动按钮？答案

【问题标题】：How to make scroll down and scroll up button outside the scroll box?如何在滚动框外制作向下滚动和向上滚动按钮？
【发布时间】：2016-09-03 08:07:38
【问题描述】：

游戏设计师让我制作带有自定义上下按钮和自定义外观滚动条的滚动条（当时不是 Windows 上的浏览器通过 Google Chrome 原生提供的滚动条）

我尝试了以下方法，但如何删除 div 内的本机滚动条？并在 div 外使用我自己的外观和感觉垂直滚动条，它可以与我现有的 div 交互？

.FixedHeightContainer {
  height: 250px;
  width:250px; 
  padding:3px; 
  background:#f00;
}
.Content {
  height:224px;
  overflow:auto;
  background:#fff;
}

<span>UP</span>
<br/>
<div class="FixedHeightContainer">
  <h2>Title</h2>
  <div class="Content">
    Game UI sucks<Br/>
    Game UI i hate it, nightmare for programmers<Br/>
    Game UI is hard<Br/>
    Game UI<Br/>
    Game UI<Br/>
    Game UI<Br/>
    Game UI<Br/>
    Game UI<Br/>
    Game UI<Br/>
    Game UI<Br/>
    Game UI<Br/>
    Game UI<Br/>
    Game UI<Br/>
    Game UI<Br/>
    Game UI<Br/>
    Game UI<Br/>
  </div>
</div>

<Br/>
<span>DOWN</span>

【问题讨论】：

溢出：隐藏在 .content 上
我在这个jsfiddle.net/ftkbL/4903中添加了javascript到UP/DOWN
制作你自己的滚动条 - 你可以看到我在上一条评论中更新的小提琴中向上/向下的工作方式 - 如果你希望有人为你编写整个滚动条代码，它不会是我:)
它不会起作用，因为@JaromandaX 只是提示您如何隐藏滚动，如果您真的希望滚动工作，您必须在内容中添加另一个 div 并将滚动条推出溢出的父级：隐藏；所以它可以被隐藏，我建议你阅读自定义滚动和滚动事件来解决这个问题。
@YumYumYum - 点击 UP 和 DOWN（文本） - 代码只是概念证明......你还需要一个“可拖动”项目 - 再说一次，我不是icanhazcode.com 所以我不是为你写的

标签： javascript jquery css html google-chrome

【解决方案1】：

请参考以下链接。它是与自定义滚动条相关的所有查询的一站式答案。

css-tricks scrollbar

编辑： View Demo

/* For the "inset" look only */
html {
    overflow: auto;
}

body {
    position: absolute;
    top: 20px;
    left: 20px;
    bottom: 20px;
    right: 20px;
    padding: 30px; 

    overflow-y: scroll;
    overflow-x: hidden;
}

/* FAT or SLIM? */
::-webkit-scrollbar {
    width: 12px;
}

/* Slider bar */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

/* Button inside the slider  */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(255,0,0,0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(255,0,0,0.4); 
}

【讨论】：