Question

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

我刚刚为您创建了一个摘要，供大家查看以了解其主意：

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>

Answer 1

我对您的答案做了一点编辑

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>

Answer 2

我查看并发现仅使用css和使用默认滚动条是不可能的，所以我找到了另一个js自定义滚动条并进行了更改以使其看起来像我的。我认为这可能会对某人有所帮助，所以我将其发布在这里。

null

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;
}

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

2 个答案: