CODEWITHSUNDEEP
javascriptcssscrollbar
Robert Brown
Robert Brown

Reputation: 35

Scrolling a small image with its content

I am working on a web template where the green button need to be scrolled with text. When I will scroll with my mouse the green button should come down. When I will scroll up, it will go up. Just like in the photo:

enter image description here

Upvotes: 1

Views: 61

Answers (2)

user10145552
user10145552

Reputation:

Instead of create a custom scrollbar just style it in css, Try this:

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>

Upvotes: 1

FatJuker
FatJuker

Reputation: 21

You could just make the scrollbar an input element , because there is a "range" input type that acts as a scrollbar.

Hope that this helps you.

Upvotes: 1

Related Questions