javascript - 滚动小图像及其内容

Question

我正在开发一个网页模板，其中的绿色按钮需要随文本一起滚动。当我用鼠标滚动时，绿色按钮应该会掉下来。当我向上滚动时，它会上升。就像照片中一样:

Answer 1

与其创建自定义滚动条，不如在 css 中设置样式，试试这个:

html, body::-webkit-scrollbar {
    width: 0px;
    height:0px;
}
.container{
  width:400px;
  height:150px;
  position:relative;
  border:1px solid rgba(0,0,0,0.1);
  padding:10px;
  overflow:hidden;
  overflow-y:scroll;
}
p{
  height:auto;
  margin:auto;
  font-size:15px;
}
::-webkit-scrollbar {
    width: 15px;
}
::-webkit-scrollbar-track {
    background: #ccc; 
}
::-webkit-scrollbar-thumb {
    background: green;
    box-shadow:inset 0px 0px 12px 0px rgba(0,0,0,0.6);
    border-radius:10px;
}
::-webkit-scrollbar-thumb:active {
    background: #555; 
}

<div class="container">
  <p>
    This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. This the text. 
  </p>
</div>