javascript - 如何保持滚动条的拇指高度固定？

如何保持滚动条的拇指高度固定，以使它不会随内容大小而越来越短。这可能吗？



我刚刚为您创建了一个代码片段，以供大家了解一下这个想法:

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>

最佳答案

我稍微修改了你的答案

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>