代码之家 › 专栏 › 技术社区 › Umair Shah

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

css html javascript

Umair Shah · 技术社区 · 6 年前

如何使滚动条的拇指高度保持不变,使其不会随着内容大小而变短变长。这可能吗?

我刚刚为大家创建了一个片段,供大家参考,以获得以下想法:

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>

2 回复 | 直到 6 年前

evgeni fotia 6 年前

我修改了你的答案

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>

Umair Shah 6 年前

我发现仅仅使用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>