How can I keep the scrollbar thumb height fixed?

user_2298933 0
Viewed 469

How can I keep the scrollbar thumb height fixed so that it doesn't grow shorter and longer with respect to the contents size. Is this possible?

enter image description here

I have just created a snippet for you people to take a look at to get the idea:

var IncreaseInterval;
var DecreaseInterval;
var ToStop = false;

function increaseHeight() {
  var newHeight = $('.force-overflow').height() + 500; 
  $('.force-overflow').css('height', newHeight+'px');
  if (newHeight >= 4500) {
    clearInterval(IncreaseInterval);
    if (ToStop == false) {
       setTimeout(function() { DecreaseInterval = setInterval(decreaseHeight, 1000); }, 3000);
    }
  }
}

function decreaseHeight() {
  var newHeight = $('.force-overflow').height() - 500; 
  $('.force-overflow').css('height', newHeight+'px');
  if (newHeight < 1000) {
    clearInterval(DecreaseInterval);
    IncreaseInterval = setInterval(increaseHeight, 1000);
    ToStop = true;
  }
}

IncreaseInterval = setInterval(increaseHeight, 1000);
body {
   background-color: #f7f7f7;
}

.scrollbar {
  height: 300px;
  overflow-y: scroll;
  margin:0 auto;
  width:400px;
}
.force-overflow {
  height: 600px;
  padding:right:20px;
}
/*
 *  STYLE 1
 */
.cute_scroll::-webkit-scrollbar {
  width: 20px;
  background-color: #f7f7f7;
}
.cute_scroll::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px #dfe0e4;
  border-radius: 10px;
  background-color: #f8bbd0;
  border-left: 9.5px solid #f7f7f7;
  border-right: 9.4px solid #f7f7f7;
}
.cute_scroll::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 px #ad1457 ;
  background: #f5827d;
  background-clip: padding-box;
  border: 3px solid rgba(245, 130, 125, 0.4);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="scrollbar cute_scroll">
  <div class="force-overflow">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
</div>

css html javascript
2 Answers

I edited your answer a little

window.addEventListener('load', function () {

const content          = document.getElementById('content'),
      scrollContainer  = document.getElementById('scrollbar-container'),
      scrollbar        = document.getElementById('scrollbar');

var   scroll   = false,
      start    = getPosition(scrollbar).y;
const constent = (content.scrollHeight-content.offsetHeight)/scrollContainer.offsetHeight;

scrollbar.addEventListener('mousedown', function(e){
 scroll = true;
});

document.addEventListener('mouseup', function(){
 scroll = false;
});

document.addEventListener('mousemove', function(e){
 if(scroll){
  var d = e.pageY - start;
  if(d < 0){
   d = 0;
  }else if(d > scrollContainer.offsetHeight - 9.5){
   d = scrollContainer.offsetHeight - 9.5;
  }
  scrollbar.style.top = d + 'px';
    if(d == scrollContainer.offsetHeight - 9.5){
   d += 9.5;
  }
  content.scrollTo(0, d*constent);
 }
});

});

function getPosition(element){
    var top = 0;
    
    do {
        top  += element.offsetTop;
    } while (element = element.offsetParent);
    
    return { y: top };
}
body {
  font-family: cursive;
  background: #eef;
}
h1 {
  text-align: center;
}
#container {
  width: 300px;
  height: 300px;
  box-sizing:border-box;
  max-width:100%;
  padding: 5px 10px;
  margin: auto;
  background: #fff;
  display: flex;
  justify-content: space-between;
}
#content {
  height: 100%;
  width: 96%;
  overflow-y: hidden;
}
#scrollbar-container {
  position: relative;
  width: 1px;
  -webkit-box-shadow: inset 0 0 6px #dfe0e4;
  border-radius: 10px;
  background-color: #f8bbd0;
}

#scrollbar {
  position: absolute;
  left: -9.5px;
  top: 0;
  height: 13px;
  width: 13px;
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 px #ad1457;
  background: #f5827d;
  background-clip: padding-box;
  border: 3px solid rgba(245, 130, 125, 0.4);
}

::-webkit-scrollbar {
  display: none;
}
<!DOCTYPE html>
<html>
<head>
 <title>Laine</title>
</head>
<body>

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
  <section>
    <h1>Custom scrollbar</h1>
    <article>
      <div id="container">
        <div id="content">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent libero lacus, lobortis congue purus hendrerit, pharetra dictum metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus in elit vel nisl condimentum tincidunt eget quis turpis. Aliquam porta placerat nisl vitae interdum. Ut nibh lorem, mollis sit amet diam a, ultrices tincidunt felis. Duis tincidunt, mauris convallis interdum suscipit, dui elit ultrices elit, et rhoncus nunc lacus a odio. Morbi quis egestas nisl. Etiam vestibulum felis vitae felis lobortis, sit amet interdum neque congue. Curabitur est augue, imperdiet ullamcorper diam ac, suscipit auctor orci. Donec id ex eget eros volutpat tempor. Vivamus pretium sagittis quam vel malesuada. In hac habitasse platea dictumst. Maecenas consequat imperdiet lacus, at faucibus mauris posuere ac. Pellentesque a tellus dolor. Ut ante nisi, sagittis quis varius eu, luctus aliquet elit. Nunc vel ullamcorper mauris. Duis scelerisque tempor velit, eget euismod arcu ultrices nec. Nulla facilisi. Pellentesque ullamcorper tellus vitae sapien dapibus venenatis. Phasellus eget nunc ornare, aliquet nulla eu, lacinia metus. Maecenas maximus porta feugiat. Pellentesque finibus nulla orci, non pulvinar libero finibus vitae. Pellentesque bibendum vehicula arcu vitae dignissim. Aliquam tempor nisl id porttitor venenatis.
        </div>
        <div id="scrollbar-container">
          <div id="scrollbar"></div>
        </div>
      </div>
    </article>
  </section>
</body>
</html>
</body>
</html>

user_86199590

I looked and found out that it's not possible with using just css and using the default scrollbar so instead I found out an another js custom scrollbar and made changes to make it look like mine. I thought it might help someone so I am posting it here.

console.log('Start');
var $ = document.getElementById.bind(document),
    container = $('scrollbar-container'),
    content = $('content'),
    scroll = $('scrollbar');

content.addEventListener('scroll', function(e) {
});
var event = new Event('scroll');

window.addEventListener('resize', content.dispatchEvent.bind(content, event));
content.dispatchEvent(event);

scroll.addEventListener('mousedown', function(start){
  start.preventDefault();
  var y = scroll.offsetTop;
  var onMove = function(end){
    var delta = end.pageY - start.pageY;
    scroll.style.top = Math.min(container.clientHeight - scroll.clientHeight, Math.max(0, y + delta)) + 'px';
    content.scrollTop = (content.scrollHeight * scroll.offsetTop / container.clientHeight);
  };
  document.addEventListener('mousemove', onMove);
  document.addEventListener('mouseup', function(){
    document.removeEventListener('mousemove', onMove);
  });
});
console.log('Done');
body {
  font-family: cursive;
  background: #eef;
}
h1 {
  text-align: center;
}
#container {
  width: 300px;
  height: 300px;
  box-sizing:border-box;
  max-width:100%;
  padding: 5px 10px;
  margin: auto;
  background: #fff;
  position: relative;
}
#content {
  height: 100%;
  width: 96%;
  overflow-y: scroll;
}
#scrollbar-container {
  position: absolute;
  right: 13px;
  bottom: 5px;
  top: 5px;
  width: 1px;
  -webkit-box-shadow: inset 0 0 6px #dfe0e4;
  border-radius: 10px;
  background-color: #f8bbd0;
}

#scrollbar {
  position: absolute;
  right: -9px;
  height: 13px;
  width: 13px;
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 px #ad1457;
  background: #f5827d;
  background-clip: padding-box;
  border: 3px solid rgba(245, 130, 125, 0.4);
}

::-webkit-scrollbar {
  display: none;
}
<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<body>
 <section>
  <h1>Custom scrollbar</h1>
  <article>
   <div id="container">
    <div id="scrollbar-container">
     <div id="scrollbar"></div>
    </div>
    <div id="content">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent libero lacus, lobortis congue purus hendrerit, pharetra dictum metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus in elit vel nisl condimentum tincidunt eget quis turpis. Aliquam porta placerat nisl vitae interdum. Ut nibh lorem, mollis sit amet diam a, ultrices tincidunt felis. Duis tincidunt, mauris convallis interdum suscipit, dui elit ultrices elit, et rhoncus nunc lacus a odio. Morbi quis egestas nisl. Etiam vestibulum felis vitae felis lobortis, sit amet interdum neque congue. Curabitur est augue, imperdiet ullamcorper diam ac, suscipit auctor orci. Donec id ex eget eros volutpat tempor. Vivamus pretium sagittis quam vel malesuada. In hac habitasse platea dictumst. Maecenas consequat imperdiet lacus, at faucibus mauris posuere ac. Pellentesque a tellus dolor. Ut ante nisi, sagittis quis varius eu, luctus aliquet elit. Nunc vel ullamcorper mauris. Duis scelerisque tempor velit, eget euismod arcu ultrices nec. Nulla facilisi. Pellentesque ullamcorper tellus vitae sapien dapibus venenatis. Phasellus eget nunc ornare, aliquet nulla eu, lacinia metus. Maecenas maximus porta feugiat. Pellentesque finibus nulla orci, non pulvinar libero finibus vitae. Pellentesque bibendum vehicula arcu vitae dignissim. Aliquam tempor nisl id porttitor venenatis.
    </div>
   </div>
  </article>
 </section>
</body>
</html>

user_22989330
Related