实现效果

HTML

 <!-- 滚动条特效S --><div class="gd_box" id="gd_box"><h1>滚动效果</h1><div class="content" id="content">1、弄堂的秋天没有枫叶bai成行的美景，却du有着独特的秋色。西风扫过，梧桐树冠抖几下zhi，灿灿的叶儿盘旋着落地，地上顿时有了一地碎金。2、好想和你一起去旅行！如果可以，在秋天，在临近黄昏的时候，与你走在这样的一条小路上，听落叶倾诉对秋风的深情，听云朵表白对蓝天的爱恋，而我，会用浅浅的笑意，去聆听你俯在我耳畔的私语。那些落叶，静静的，就好像守候着一程秘而不宣的心事，让我们，在时间无涯的荒野里，在相携相依的岁月里，可以缓缓老去。3、同样的秋天，同样的落叶，同样的旋律，却再也找不到曾经的熟悉……捡起一片似曾相识的落叶，想来它也该是经历了一世的风风雨雨……4、秋天，树叶渐渐的黄了，枯了，快要脱落了，尽管树妈妈每一年都会经历这样子的场景，可对自己的孩子总是那么依依不舍。5、秋天多么哀伤的字眼，它总是给我一种淡淡的无赖，就如同我对你的爱一样，它那么的近，又那么的远，好像已经来了，又好像还在路上，对于渴望它的人来说这总是显得有点无情，就如同你对我一样。6、弄堂秋天的中午，人们也不午睡，惬意地打个哈欠都充斥着幸福的味道。孩子们偶尔拿着串糖葫芦，偶尔拿着个吹糖人，边唱着歌谣，边在弄堂里跑，没有夏天流汗的担忧，也没有冬天厚重衣物的烦恼。7、多么陶醉秋天，秋天至此不远，一伸手，犹能触摸到余温，再伸手，已涣散。那时，你尚有一丝绿意，盈盈的，透着一线生机，没想到，在我一个回首，你却淹没在风霜里。许是红尘再也经受不起打击，不然，为什么月亮缺多圆少，而又在月圆之时喜欢风飘雨？许是人生不应该太完美，以至于有了别离。8、秋天总是给人一种莫名的惆怅。眼看着树梢枝头的叶子一点一点慢慢地泛黄，轻轻的一阵秋风吹过，有点儿枯黄的树叶就被摇下了树枝，在空中几经挣扎盘旋，最终还是无力的摇摇摆摆很是不甘心的垂落了下来，落在地上又再次被风卷起吹得满地乱串，很有一种悲秋伤离别的感觉。9、秋天是温柔的，就像母亲哺育抚养着自己的儿女。秋天是多情的，如少女那盈盈清澈的眼睛。明净的秋月更是多情，皎洁的月色铺撒开来，给大地披上一层薄纱，透出梦幻般的美。10、落叶无言，温暖如昔，这个秋天因为有你，真的很美。如果时光可以折叠，我希望可以将彼此折叠，沉睡在有你，有我的时光里。让爱如墨香，念如水。筝一弦恬淡心曲，懂你眉间爱意。歌一曲不离不弃，懂你眼神情牵。爱在深秋，无语缱绻。</div><div class="scroll"><div class="bar" id="bar"></div></div></div><!-- 滚动条特效E -->

CSS

/* 滚动条特效S */
.gd_box {width: 300px;height: 500px;border: 1px solid pink;margin: 100px;position: relative;padding: 10px;
}.gd_box h1 {color: pink;
}.content {padding: 5px 18px 5px 18px;position: absolute;
}.scroll {width: 18px;height: 100%;position: absolute;top: 0;right: 0;background-color: rgb(207, 201, 201);
}.bar {width: 100%;position: absolute;top: 0;left: 0;background-color: pink;border-radius: 10px 5px;cursor: pointer;
}/* 滚动条特效E */

JS

// 滚动条特效S
// 按照比例设置滚动条高度，bar/侧边栏=显示出的内容高度/内容的整题高度,bar/box=box/content
var box = document.getElementById("gd_box");
var content = document.getElementById("content");
var bar = document.getElementById("bar");
// 判断内容多少来选择是否删去滚动条
if (content.offsetHeight > box.offsetHeight) {bar.style.height = box.offsetHeight / content.offsetHeight * box.offsetHeight + "px";
} else {bar.style.height = 0;
}
// 鼠标移动时可以让bar跟着鼠标走
bar.onmousedown = function (event) {// 获取鼠标在页面的位置var event = event || window.event;var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;var barBoxY = pageY - box.offsetTop - bar.offsetTop;document.onmousemove = function (event) {// 让bar跟着鼠标在盒子中走,得到鼠标在页面的坐标,鼠标在盒子的坐标var event = event || window.event;var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;var boxY = pageY - box.offsetTop;var barY = boxY - barBoxY;if (barY < 0) {barY = 0}if (barY > box.offsetHeight - bar.offsetHeight) {barY = box.offsetHeight - bar.offsetHeight;}bar.style.top = barY + "px";// 清除选中文字window.getSelection ? window.getSelection().removeAllRanges() : document.Selection.empty();// 按比例移动内容// 内容移动距离/bar当前移动的距离=内容能移动的总距离/bar能移动的总距离var rate = (content.offsetHeight - box.offsetHeight) / (box.offsetHeight - bar.offsetHeight);content.style.top = -rate * barY + "px";};
};
// 鼠标弹起则不再跟着走
document.onmouseup = function () {document.onmousemove = null;
}
// 滚动条特效E

JS实现滚动栏的效果相关推荐

用js实现导航栏shoufang效果_【读者投稿】用Github+docsify，我花了半天就搭好了个人博客...
前言 "作为一个真正的码农,不能没有自己的个人博客",这是我说的.惭愧的是,入行两年多了都没搞起来,这让我一度怀疑自己是个假程序员.昨天终于克服了心里的"犹豫" ...
html导航栏悬停过渡,JS 实现导航栏悬停效果
JS-实现导航栏悬停先布个局: Test 1 tab1 tab2 tab3 tab4 2 3 4 5 6 7 添加简单的样式: div.main{ width: 800px; background: ...
原生js实现tab栏切换效果
我是歌谣放弃很容易但是坚持一定很酷微信公众号关注小歌谣一起学习前后端知识运行效果首先我们来看一下原生js实现的效果下面就开始直接上代码了 index.html <!DOCTYPE h ...
android 苹果电脑底部图标滚动效果,JS实现仿苹果底部任务栏菜单效果代码
本文实例讲述了JS实现仿苹果底部任务栏菜单效果代码.分享给大家供大家参考.具体如下: 这款仿苹果电脑的底部任务栏菜单,是纯JavaScript实现的菜单特效,鼠标放上有响应效果,菜单图标会变大,而且动 ...
JS 判断滚动底部并加载更多效果。。。。。。。。。
JS 判断滚动底部并加载更多效果......... <html lang="zh-cn"> <head> <meta http-equiv=" ...
html怎么做到滚动鼠标转换,js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)...
本文实例讲述了js实现的鼠标滚轮滚动切换页面效果的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: wheel var currentShowPageIndex = 0; v ...
JQuery——BreakingNews.js新闻滚动效果
BreakingNews.js新闻滚动效果这里是直观效果展示使用这种效果我们需要三个包 jq.min.js BreakingNews.css breakingnews.js breakingnew ...
html js 链接滚动效果,【JS特效】不间断滚动效果通用类
网上发现一个不错的js不间断滚动效果,今天来转载一下吧.这个js的作者应是崔永祥(因其博客已不存在,而无法确认),我这里只简单整理,只为笔记. ??? 需要通过样式,js来实现这个翻滚效果. ??? ...
scrolltop 原生js_解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法...
最近在做博客的目录功能,发现一个在现代浏览器间的一个bug,或是称之为差异,即页面滚动值(scrollTop)的获取与设定. 在此之前先说一下关于页面元素的坐标获取,这张图的经典性不必再提. 实现滚动 ...

JS实现滚动栏的效果

根据比例计算方法实现内容随滚动条的调整进行改动的效果

实现效果

HTML

CSS

JS

JS实现滚动栏的效果相关推荐

最新文章

热门文章