滚动条自定义

Question

我找到了一种方法让下面的滚动条实际工作，但我不知道如何隐藏原始滚动条并且只显示图片中的滚动条，我还是那么新请帮助我。

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 });
});

Answer 1

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

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

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

＆＃13;

＆＃13;

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

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

＆＃13;

.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{
    cursor:n-resize;
    position:absolute;
	  overflow:auto;
    top:0px;
    right:0px;
    z-index:2;
    background:#444;
    width:17px;
    border-radius:8px;
}

＆＃13;

<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>


	
<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.
			         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>

＆＃13;

＆＃13;

＆＃13;