【滚动条】文本到一定长度,滚动到最底部,底部文字显示不全。

cai_master 2018-07-31 09:19:26
<!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>

请大神看看怎么回事
...全文
867 7 打赏 收藏 转发到动态 举报
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
75闪光雷 2018-08-06
  • 打赏
  • 举报
回复
我试了 当你放大或者缩小的时候 用于盛放 内容的 盒子 size变了。 导致你的滚动条跟盒子不再一个平面上,具体参考下面图片:
漠子凉 2018-08-01
  • 打赏
  • 举报
回复
*{
margin: 0;
padding: 0;
box-sizing: border-box
}
Logerlink 2018-08-01
  • 打赏
  • 举报
回复
试了一下 可以完全显示
丰云 2018-08-01
  • 打赏
  • 举报
回复
加个padding样式就行了撒。。。
cai_master 2018-08-01
  • 打赏
  • 举报
回复
引用 3 楼 sinat_34353062 的回复:
*{
margin: 0;
padding: 0;
box-sizing: border-box
}

还是没用
cai_master 2018-08-01
  • 打赏
  • 举报
回复
引用 2 楼 Logerlink 的回复:
试了一下 可以完全显示

当内容过长时就出现了
比如2000px时 内容可以完全显示
放大10倍 底部就有一大截出不来
刚开始学习这些 想弄明白为什么会这样
cai_master 2018-08-01
  • 打赏
  • 举报
回复
引用 1 楼 foren_whb 的回复:
加个padding样式就行了撒。。。

这样是可以让字显示完全,但盒子还是有一部分没出来。
按道理应该是全部可以出来的,就是想弄明白 哪里出问题了

87,977

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧