3

如何保持滚动条拇指高度固定，使其不会随着内容大小而变短和变长。这可能吗？

在此处输入图像描述

我刚刚创建了一个片段供大家查看以了解这个想法：

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>

4

2 回答 2

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>

于 2018-08-29T10:37:15.370 回答
0

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

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>

于 2018-08-29T00:40:05.313 回答