使滚动条自定义

我找到了一种方法来使滚动条在下面，它的实际工作，但我不知道如何隐藏原来的滚动条，只显示图片中的滚动条，我还是那么新，请帮助我。使滚动条自定义

HTML： -

<div class="parent"> 
      <div class="scrollbar"></div> 
      <div class="scrollable"> 
       <p>Lorem ipsum dolor sit amet, 
       consectetur adipiscing elit. Cras non nunc eget sapien molestie mollis. 
       Proin vestibulum vehicula varius. Duis a nunc ac risus facilisis consectetur.</p> 
      </div> 
    </div>

CSS： -

.parent{ 
    position:relative; 
     margin:50px; 
     overflow:hidden; 
    height:200px; 
    width:180px; 
    background:#ddd; 
} 
.scrollable{ 
     overflow-y:scroll; 
    position:absolute; 
     padding:0 17px 0 0; 
    width: 180px; 
     height:100%; 
} 
.scrollbar{ 

    position:absolute; 
    overflow:auto; 
    top:0px; 
    right:0px; 
    z-index:2; 
    background:#444; 
    width:7px; 
    border-radius:5px; 
}

的Javascript： -

var $scrollable = $('.scrollable'); 
    var $scrollbar = $('.scrollbar'); 
    $scrollable.outerHeight(true); 
    var H = $scrollable.outerHeight(true); 
    var sH = $scrollable[0].scrollHeight; 
    var sbH = H*H/sH; 



$('.scrollbar').height(sbH); 

$scrollable.on("scroll", function(){ 

    $scrollbar.css({top: $scrollable.scrollTop()/H*sbH }); 
});

来源

2016-07-30 pexichdu

是什么浏览器您使用？在Chrome中，原始滚动条隐藏起来！ –

我正在使用Chrome – pexichdu

将'width：100％;'添加到'.scrollable' css –

它工作正常。问题是什么。请确保您有链接下面的两个文件，并在您的计算机与互联网连接的连接

//code.jquery.com/jquery-1.11.0.min.js”

//code.jquery.com /ui/1.11.0/jquery-ui.min.js”

var $scrollable = $('.scrollable'), 
 
    $scrollbar = $('.scrollbar'), 
 
    H = $scrollable.outerHeight(true), 
 
    sH = $scrollable[0].scrollHeight, 
 
    sbH = H*H/sH; 
 

 
$('.scrollbar').height(sbH).draggable({ 
 
    axis : 'y', 
 
\t containment : 'parent', 
 
\t drag: function(e, ui) { 
 
\t \t \t $scrollable.scrollTop(sH/H*ui.position.top ); 
 
    } 
 
}); 
 
    
 
$scrollable.on("scroll", function(){ 
 
\t $scrollbar.css({top: $scrollable.scrollTop()/H*sbH }); 
 
});

.parent{ 
 
    position:relative; 
 
\t margin:50px; 
 
\t overflow:hidden; 
 
    height:200px; 
 
    width:180px; 
 
    background:#ddd; 
 
} 
 
.scrollable{ 
 
\t overflow-y:scroll; 
 
    position:absolute; 
 
\t padding:0 17px 0 0; 
 
    width: 180px; 
 
\t height:100%; 
 
} 
 
.scrollbar{ 
 
    cursor:n-resize; 
 
    position:absolute; 
 
\t overflow:auto; 
 
    top:0px; 
 
    right:0px; 
 
    z-index:2; 
 
    background:#444; 
 
    width:17px; 
 
    border-radius:8px; 
 
}

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
 
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script> 
 

 

 
\t 
 
<div class="parent"> 
 
    <div class="scrollbar"></div> 
 
    <div class="scrollable"> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non nunc eget sapien molestie mollis. Proin vestibulum vehicula varius. Duis a nunc ac risus facilisis consectetur. 
 
\t \t \t   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non nunc eget sapien molestie mollis. Proin vestibulum vehicula varius. Duis a nunc ac risus facilisis consectetur. 
 

 
    </div> 
 
</div>

来源

2016-07-30 13:49:52

使滚动条自定义

回答

相关问题