滚动小图像及其内容

Question

我正在处理一个Web模板，其中绿色按钮需要与文本一起滚动。 当我用鼠标滚动时，绿色按钮应该会下降。 当我向上滚动时，它会上升。 就像照片中一样：

Answer 1

您可以仅将滚动条作为输入元素，因为有一种“范围”输入类型可以充当滚动条。

希望对您有帮助。

Answer 2

代替创建自定义滚动条，只需在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>