87,907
社区成员
发帖
与我相关
我的任务
分享【滚动条】文本到一定长度，滚动到最底部，底部文字显示不全。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉滚动</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 300px;
height: 500px;
margin: 20px auto;
border: 1px solid red;
padding-right: 15px;
position: relative;
overflow: hidden;
}
.scroll{
position: absolute;
right: 0;
top: 0;
width: 18px;
height: 500px;
background-color: #999999;
}
.bar{
width: 18px;
background-color: red;
position: absolute;
border-radius: 10px;
}
#content{
position: absolute;
width: 300px;
height:auto;
top:0;
left: 0;
}
</style>
</head>
<body>
<div class="box">
<div id="content">
文字太长我删了
</div>
<div class="scroll" id="scroll">
<div class="bar" id="bar"></div>
</div>
</div>
</body>
</html>
<script>
var bar=document.getElementById("bar");
var scroll=document.getElementById("scroll");
var content=document.getElementById("content");
var height=scroll.offsetHeight/content.offsetHeight * scroll.offsetHeight;
bar.style.height=height+"px";
bar.onmousedown=function (event) {
var top=event.clientY-this.offsetTop;
document.onmousemove=function (event) {
barTop=event.clientY-top;
if(barTop<0){
barTop=0;
}
else if(barTop>scroll.offsetHeight-bar.offsetHeight){
barTop=scroll.offsetHeight-bar.offsetHeight;
}
bar.style.top=barTop+"px";
content.style.top=-scroll.offsetHeight/bar.offsetHeight*barTop+"px";
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
}
document.onmouseup=function () {
document.onmousemove=null;
}
}
</script>
请大神看看怎么回事
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉滚动</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 300px;
height: 500px;
margin: 20px auto;
border: 1px solid red;
padding-right: 15px;
position: relative;
overflow: hidden;
}
.scroll{
position: absolute;
right: 0;
top: 0;
width: 18px;
height: 500px;
background-color: #999999;
}
.bar{
width: 18px;
background-color: red;
position: absolute;
border-radius: 10px;
}
#content{
position: absolute;
width: 300px;
height:auto;
top:0;
left: 0;
}
</style>
</head>
<body>
<div class="box">
<div id="content">
文字太长我删了
</div>
<div class="scroll" id="scroll">
<div class="bar" id="bar"></div>
</div>
</div>
</body>
</html>
<script>
var bar=document.getElementById("bar");
var scroll=document.getElementById("scroll");
var content=document.getElementById("content");
var height=scroll.offsetHeight/content.offsetHeight * scroll.offsetHeight;
bar.style.height=height+"px";
bar.onmousedown=function (event) {
var top=event.clientY-this.offsetTop;
document.onmousemove=function (event) {
barTop=event.clientY-top;
if(barTop<0){
barTop=0;
}
else if(barTop>scroll.offsetHeight-bar.offsetHeight){
barTop=scroll.offsetHeight-bar.offsetHeight;
}
bar.style.top=barTop+"px";
content.style.top=-scroll.offsetHeight/bar.offsetHeight*barTop+"px";
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
}
document.onmouseup=function () {
document.onmousemove=null;
}
}
</script>
请大神看看怎么回事
...全文
请发表友善的回复…
发表回复
75闪光雷 2018-08-06
- 打赏
- 举报
我试了 当你放大或者缩小的时候 用于盛放 内容的 盒子 size变了。
导致你的滚动条跟盒子不再一个平面上，具体参考下面图片：
漠子凉 2018-08-01
- 打赏
- 举报
*{
margin: 0;
padding: 0;
box-sizing: border-box
}
margin: 0;
padding: 0;
box-sizing: border-box
}
Logerlink 2018-08-01
- 打赏
- 举报
试了一下 可以完全显示
丰云 2018-08-01
- 打赏
- 举报
加个padding样式就行了撒。。。
cai_master 2018-08-01
- 打赏
- 举报
还是没用
cai_master 2018-08-01
- 打赏
- 举报
当内容过长时就出现了
比如2000px时 内容可以完全显示
放大10倍 底部就有一大截出不来
刚开始学习这些 想弄明白为什么会这样
cai_master 2018-08-01
- 打赏
- 举报
这样是可以让字显示完全，但盒子还是有一部分没出来。
按道理应该是全部可以出来的，就是想弄明白 哪里出问题了
