伟德BETVICTOR_手机1946韦德最新网站_韦德1946手机版客户端【唯一授权官网】

所属分类:UI-滚动
伟德BETVICTOR_手机1946韦德最新网站_韦德1946手机版客户端【唯一授权官网】 ie兼容9
更新时间:2018/1/12 下午5:52:55更新说明:修改removeClass函数
更新时间:2018/1/10 下午7:28:07更新说明:添加方法:jump()参数是一个对象作用:跳到指定位置o.id -> 要跳到那个id的位置;o.pos -> 要跳到那个具体的位置,如果为字符串(两个选中择'top','bottom','left','right'),如果为对象({top: number, left: number}),为对象时如果要Y轴滚动条滚动就设置top,要两个轴一起滚动才一起设置。o.time -> 滚动动画时间,不设置为没有动画注:如果id存在,则pos不生效

如:

1、要跳到顶部oBtn3.onclick = function () { oMyBar1.jump({ pos: 'top', time: 400 }) }2、跳到id为p14的节点位置oBtn2.onclick = function () { oMyBar1.jump({ id: 'p14', time: 400 }) }3、跳到距离顶部500位置oBtn5.onclick = function () { oMyBar1.jump({ pos: { top: 200 }, time: 400 }) }更新时间:2018/1/9 下午5:01:46更新说明:添加配置enterColor,在鼠标移上滚动条时滚动条变色,在鼠标移出并抬起的时候恢复原来的颜色,不设置的时候,鼠标移上不变色。
更新时间:2018/1/2 上午11:15:32更新说明:1. 解决包裹层有padding时导致的滚不完的问题;2. 添加了borderRadius参数设置滚动条的圆角,默认是width参数的一半,不要圆角设置broderRadius:0;
更新时间:2017/12/28 上午11:33:23更新说明:由于获取内容高度+padding时候减去了,border高度,造成了,当包裹层的祖先元素是隐藏时滚动条创建实例对象,而让包裹层高度不正确。以及当包裹层的祖先元素是隐藏时,包裹层、滚动层宽高得0时,初始化不创建滚动条的问题。

使用方法

如果需要使用这个伟德BETVICTOR。1、dom结构需要有一个包裹层和一个滚动层,如下。包裹层是id="wrapper1"的div(必须有id),滚动层是id="scrollOne"的div(不必须有)。<div class='box' id='wrapper1'>     <div class="scroll" id="scrollOne">         <p>1</p>         <p>2</p>         <p>3</p>         <p>4</p>         <p>5</p>         <p>6</p>         <p>7</p>         <p>8</p>         <p>9</p>     </div> </div>2、包裹层如果Y轴需要滚动条,则包裹层Y轴需要固定的高度,并Y轴overflow-y:hidden;同理:X轴也一样。/*x轴需要滚动条包裹层就要设置固定宽度,并在x方向overflow:hidden;y轴同理*/ .box {     width: 600px; height: 300px; border: 1px solid #444; margin: 10px auto; padding: 0; overflow: hidden; }3、引入my_scrollbar.js文件4、通过构造函数创建实例,只有selId是必须有的配置参数var oMyBar1 = new MyScrollBar({     selId: 'wrapper1' });5、创建实例后就有滚动条了

6、所有的配置参数

    selId -> 滚动内容盒子的id (必须)    width -> 滚动条的宽度 (默认10,请设置为偶数)    bgColor -> 滚动条包裹层的颜色 (默认#eaeaea)    barColor -> 滚动条的颜色 (默认#ccc)    enterShow -> 是否为鼠标进入包裹层后显示滚动条 (默认true是)    hasY -> 是否需要Y轴滚动条(默认true需要)    hasX -> 是否需要X轴滚动条(默认false不需要)7、如果在创建了实例之后需要改变滚动层之中的数据的话,改变之后调用一下,setSize方法,重置一下滚动条高度oBtn.onclick = function () {     var oP = document.createElement("p");     oP.innerHTML = '123123123';     oScroll.appendChild(oP);     oMyBar1.setSize(); }8、注意:如果滚动盒子的祖先元素在创建实例的时候是display:none隐藏的话,那这时候滚动条的高度是0,所以在其显示之后要调用一次setSize方法,来重新计算高度。
相关伟德BETVICTOR-滚动

jQuery全屏视差滚动效果

jQuery全屏视差滚动效果
  滚动
 14637  108

jQuery仿淘宝网右侧悬浮返回顶部和建议代码

jQuery仿淘宝网右侧悬浮返回顶部和建议代码
  滚动
 16861  46

页面过度效果大集合(推荐!)

jQuery页面过度效果大集合
  滚动
 38199  737

jQuery美化滚动条伟德BETVICTORmCustomScrollbar

mCustomScrollbar 是个基于 jQuery UI 的自定义滚动条伟德BETVICTOR,它可以让你灵活的通过 CSS 定义网页的滚动条,并且垂直和水平两个方向的滚动条都可以定义
  滚动
 5106  38

讨论这个项目(21)回答他人问题或分享伟德BETVICTOR使用方法奖励jQ币

       EFG  0
    2018/3/12 14:48:52
    ajax加载内容的时候,setSize没有用
           EFG 0
        2018/3/12 14:55:02
        var oMyBar1 = new MyScrollBar({     selId: "wrapper1",     width: "5",     barColor: "#595959",     bgColor: "#202020", }); $("#select-year-list li").on("click", function() {     $.ajax({         url: 'test.html',         type: 'GET',         async: true,         data: '',         timeout: 5000,         dataType: 'html',         beforeSend: function() {},         success: function(data) {             $("#varietylist").html(data);             oMyBar1.setSize();         },         error: function() {             alert("载入失败,请刷新页面重试!");         }     }); })
           EFG 0
        2018/3/12 14:57:14
        如果div内容默认空,ajax载入内容进来后 执行 setSize() 不显示滚动条
        areyouOk0
        2018/3/12 15:26:28
        把伟德BETVICTOR放到一个function aa(){...} 中 ,ajax后要在运行一下aa();因该就可以了。
    回复
    英雄本色 0
    2018/3/2 16:25:01
    你这个很好,很强大,给你点,如果是锚点跳转,用这个滚动条是否会滚动到相对应的位置
        英雄本色0
        2018/3/2 16:26:52
        为什么点赞的颜文字出不来呢
    回复
    英雄本色 0
    2018/3/2 16:21:16
    希望可以设置滚动条的位置;不想让滚动条一直在右侧或下侧,也可在左侧或上侧,或是与右侧或下侧有一点间隔空隙
    回复
    麦祖 0
    2018/1/11 15:42:16
    滚动层 不设置高度 就不显示滚动条 这个情况有办法吗 也可能和页面其他js有冲突?
        静心若水1
        2018/1/11 22:10:09
        Y轴滚动条不用设置高度也可以显示滚动条呀。X轴滚动条需要设置宽度,因为滚动层的盒子不设置宽度,就是遮罩层的宽度。
        麦祖0
        2018/1/12 11:10:37
        用在选项卡下的列表滚动   我设置了高度 就显示 不设置 就不显示了 
        静心若水1
        2018/1/12 17:55:37
        8、注意:如果滚动盒子的祖先元素在创建实例的时候是display:none隐藏的话,那这时候滚动条的高度是0,所以在其显示之后要调用一次setSize方法,来重新计算高度。
        静心若水0
        2018/1/12 17:56:48
        在该选项卡显示的时候调用一下setSize方法,应该可以
    回复
    麦祖 0
    2018/1/10 10:16:26
    可以设置 跳转到某个位置不 比如第几个P或者某个id的位置
        静心若水0
        2018/1/10 11:01:43
        暂时没有,我弄好了,更新。
        静心若水0
        2018/1/10 19:36:07
        好了,这个功能添加上了,先在在审核。
        areyouOk0
        2018/1/10 21:05:54
        非常好,作者辛苦啦。
        麦祖0
        2018/1/11 12:37:11
        棒!辛苦辛苦
        麦祖0
        2018/1/11 16:53:53
        可以直接打开就自动滚动要某个id位置吗 似乎现在这个 只能有点击等动作才行
        静心若水1
        2018/1/11 22:13:49
        现在没有打开的默认位置设置,可以在初始化后执行MyScrollbar.jump()跳过去,不设置time。
    回复
    静心若水 0
    2018/1/2 11:28:46
    包裹层有padding时候的问题修改了,可能还需要审核一段时间。 回复
    静心若水 0
    2018/1/2 11:24:27
    有什么问题,请大家指正,我会努力更新的! 回复
取消回复