- 浏览: 448373 次
- 性别:
- 来自: 广州
文章分类
最新评论
-
ubuntu的疯狂:
推荐一份完整的教程:http://blog.ddlisting ...
Emberjs学习 -
ptz19:
请问,如果把合并前的文件,不要dest 目标目录来。如: js ...
gulp下静态资源的合并、压缩、MD5后缀 -
zhouzq1008:
楼主,还有个问题,<a href="" ...
gulp下静态资源的合并、压缩、MD5后缀 -
zhouzq1008:
感谢楼主,用到了您的代码, 但现在好像有改动 否则会报错:修改 ...
gulp下静态资源的合并、压缩、MD5后缀 -
denverj:
感谢分享~
Emberjs学习
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link type="text/css" rel="styleSheet" href="base.css"/> <script type="text/javascript" charset="utf-8" src="jquery.js"></script> <style> #wrapper{width:300px;background: #ff0;position:fixed;right:10px;top:20px;bottom:0;color:#fff;} #wrapper{*height:100%;} .box{overflow: hidden;position: relative;height:100%;} .box ul{height:1200px;background:#006600;border:1px solid #FABE28;} .fakebar{position:absolute;top:0;right:5px;height:50%;width:15px;background:#ccc;opacity:0.5; border-radius:8px; } </style> </head> <body> <div id="wrapper"> <div class="box"> <ul> <li>啊啊飞ffe</li> <li>试试方法</li> <li>啊啊飞ffe</li> <li>试试方法</li> <li>啊啊飞ffe</li> <li>试试方法</li> <li>啊啊飞ffe</li> <li>试试方法</li> <li>啊啊飞ffe</li> <li>试试方法</li> <li>啊啊飞ffe</li> <li>试试方法</li> <li>啊啊飞ffe</li> <li>试试方法</li> <li>啊啊飞ffe</li> <li>试试方法</li> <li>啊啊飞ffe</li> <li>试试方法</li> <li>啊啊飞ffe</li> <li>试试方法</li> <li>啊啊飞ffe</li> <li>试试方法</li> <li>啊啊飞ffe</li> <li>试试方法</li> <li>啊啊飞ffe</li> <li>试试方法</li> <li>啊啊飞ffe</li> <li>试试方法</li> <li>啊啊飞ffe</li> <li>试试方法</li> <li>啊啊飞ffe</li> <li>试试方法</li> <li>啊啊飞ffe</li> <li>试试方法</li> <li>啊啊飞ffe</li> <li>试试方法</li> <li>啊啊飞ffe</li> <li>试试方法</li> <li>啊啊飞ffe</li> <li>试试方法</li> <li>啊啊飞ffe</li> <li>试试方法</li> </ul> <div class="fakebar"></div> </div> </div> <script> var $ = jQuery; var boxEl = $(".box").get(0); var $ulEl = $(".box ul"); var $barEl = $(".fakebar"); var hiddenH = 0; var spaceH = 0; var h0 = 0; var h1 = 0; var step = 20; var barStep = 0; function scrollFunc(e){ if(e.wheelDelta){ //W3C 向上120/向下-120,opera 在V9.5之前的取值是反的。 return window.opera && window.opera.ver < 9.5 ? -e.wheelDelta:e.wheelDelta; }else if(e.detail){ // firefox : 向上-3/向下3 return e.detail * -40; } } function bindMousewheel(el,fn){ var callback = function(e){ fn(scrollFunc(e)); }; if(document.addEventListener){//W3C el.addEventListener('DOMMouseScroll',callback,false);//firefox el.addEventListener('mousewheel',callback,false);//IE8+,Opera,Chrome }else if(document.attachEvent){ el.attachEvent('onmousewheel',callback); } } function computeStep(){ h0 = 0; h1 = 0; //滚动条高度 var barH = parseInt($barEl.height(),10); //滚动条的空白高度 spaceH = boxEl.clientHeight - barH; //内容被hidden的高度 hiddenH = boxEl.scrollHeight - boxEl.clientHeight; //计算滚动条的步长 barStep = spaceH/(hiddenH/step); } function scrollPos(delta){ if(delta === -120){ //向下滚动 h0 += step; h0 = Math.min(h0,hiddenH); h1 += barStep; h1 = Math.min(h1,spaceH); }else{//向上滚动 h0 -= step; h0 = Math.max(h0,0); h1 -= barStep; h1 = Math.max(h1,0); } $ulEl.css("marginTop",-h0); $barEl.css("top",h1); } jQuery(function(){ $(window).resize(function(){ computeStep(); //简单重置偏移。最好能优化一下,保留当前位置 $ulEl.css("marginTop",0); $barEl.css("top",0); }); computeStep(); bindMousewheel(boxEl,scrollPos); }); </script> </body> </html>
发表评论
-
webpack简单打包PC网站前端资源
2016-02-23 14:30 1691:arrow: 1. 纯前端的打包输出,比较有局限 2 ... -
简单下拉框模拟
2015-06-19 16:19 726<!doctype html> < ... -
grunt构建基于seajs的网站实现
2015-06-16 16:49 1127Gruntfile.js module.exports ... -
js平滑滚动回到顶部
2015-06-10 11:42 4013优先使用 requestAnimationFrame实现。 实 ... -
fis-amd 的使用与修改
2015-05-26 16:14 3955https://github.com/fex-team/fis ... -
scrollMagic 视差与滚动动画GSAP
2015-05-19 18:14 4440scrollMagic(https://github.com/ ... -
skrollr-视差滚动动画插件
2015-05-19 14:18 1738skrollr ( https://github.com/Pr ... -
stellar插件的使用
2015-05-18 17:30 1783<!DOCTYPE html> < ... -
四个方向鼠标滑入的css动画
2015-05-14 18:08 2166<!DOCTYPE html> <ht ... -
icon font VS svg font
2015-05-14 15:21 1211关于字体图标和SVG图标,CSS TRICK网站有较好的说明。 ... -
gulp下静态资源的合并、压缩、MD5后缀
2015-05-05 15:48 22631var gulp = require('gulp'); ... -
DOMContentLoaded VS onload VS onreadystatechange
2015-04-30 14:50 70081. DOMContentLoaded 在页面html、scr ... -
简单的css3全屏滚动-左右方向
2015-04-28 15:17 4065据说 translateZ(0)可以触发GPU渲染,提高动画的 ... -
简单的css3全屏滚动
2015-04-27 16:41 1450<!DOCTYPE html> <ht ... -
jquery插件treetable 的使用
2015-04-20 16:12 11997插件的文档写得不是很好,为了能弄出异步加载的功能,小折腾了一番 ... -
纯CSS3的图片slider
2015-04-16 14:36 961<div class="container ... -
sublime 侧边栏字体大小修改
2015-04-16 10:46 3832【转载自:http://jekhy.com ... -
移动端的“点透”问题
2015-04-15 14:13 1658移动端的“点透”问题,这篇博文有较好的说明: http://w ... -
scheme缺少,ie的bug
2015-04-01 17:34 532在页面上定位一个资源(JS/CSS/image),通常的url ... -
大整数相加
2015-03-26 22:18 934function repeatStr(ch, n){ ...
相关推荐
在网页设计中,有时我们可能需要自定义或模拟滚动条以增强用户体验或配合特定的设计风格。JavaScript(简称JS)提供了一种方式来实现这一功能,让我们深入探讨一下如何使用JavaScript来模拟滚动条。 首先,我们需要...
总之,通过JavaScript模拟滚动条,我们可以实现跨浏览器的个性化滚动体验,同时结合CSS3的样式定制,可以创造出符合网站设计风格的独特滚动条,提升用户体验。不过,需要注意的是,过度复杂的滚动条可能会影响页面...
"很好的jq模拟滚动条"是一个专门针对jQuery库开发的插件,它提供了一种自定义和美化滚动条的方法,以增强网页的视觉效果和用户体验。 jQuery,简称jq,是一个轻量级、功能丰富的JavaScript库,它简化了HTML文档遍历...
本主题聚焦于"jQuery实现模拟滚动条插件版",这是一个能够自定义网页滚动条外观和行为的工具。通过使用这样的插件,开发者可以为网站提供更加个性化和一致的用户体验。 首先,我们需要理解jQuery的基本用法。jQuery...
为了模拟滚动条,我们创建了一个名为`#content`的div,其高度设置为1000px,它包含着所有章节内容,由于其父元素的高度限制,内容会超出可视区域,从而需要滚动查看。 滚动条的样式通过`.scrollDiv`类定义,这是一...
JavaScript 模拟滚动条是一种常见的前端技术,它允许开发者在网页上创建自定义的滚动交互效果,以替代浏览器默认的滚动条。这种技术通常用于增强用户体验,提供更丰富的视觉效果和交互性。以下是对这个主题的详细...
11-模拟滚动条.html
04-模拟滚动条.html
09-模拟滚动条.html
10-模拟滚动条.html
simScroll插件使用图片模拟滚动条,个人觉得从功能上来说已接近完美了,不过还是有点东西要完善的。就目前来说它支持的功能有: 1、上下按钮、滚动区域,支持切换快速滚动;遗憾的地方:滚动区域翻页滚动时,当...
### JS模拟滚动条(横向与纵向)实现原理与关键技术点 #### 一、概述 在Web开发中,自定义滚动条是一种常见的需求,特别是在需要增强用户体验或者满足特定设计风格的情况下。本文将详细介绍如何使用JavaScript来...
应一个朋友之邀,他说用vb的时间空间来控制一个滚动条的增长...本程序没有使用MFC,倒是十分简单,就是设置一个timer,然后定时处理“滚动条”,我也没有使用真正的滚动条,而是根据朋友的要求,自己用矩形模拟了一个。
这是由于IE浏览器的一个已知问题,它对模拟滚动条的最小宽度有一定的限制。在某些版本的IE中,滚动条需要至少17像素的宽度才能正常工作。在示例中,17像素宽的`div`可能没有足够的空间来显示并操作滚动条,导致滚动...
在本文中,我们将深入探讨如何使用JavaScript来创建一个自定义的、兼容IE6及更高版本的模拟滚动条,以及如何通过个性化定制实现更酷炫的滚动效果。标题和描述提到的"scroll"项目是一个轻量级(只有2KB)的解决方案,...
系统默认的滚动条很丑,用这个可以自己换成图片等。 主要事件: 上、下按钮按住,内容慢慢滚动。 拖动滚动条,内容快速滚动。 点击滚动条空闲位置,内容定位。 鼠标滚轮在内容中滚动时,内容滚动。 代码未整理,...
在C#编程中,滚动条(ScrollBar)控件是一个常用元素,它允许用户通过滚动查看大量数据或在大型用户界面中导航。这个“C#180滚动条示例 源代码”压缩包可能包含了关于如何在Windows Forms或WPF应用中实现滚动条功能...