Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/445.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 实现滚动条,但光标根本不移动?另外,如果你能让我知道如何嵌入鼠标滚动在这个?_Javascript_Html_Css_Web_Scrollbar - Fatal编程技术网

Javascript 实现滚动条,但光标根本不移动?另外,如果你能让我知道如何嵌入鼠标滚动在这个?

Javascript 实现滚动条,但光标根本不移动?另外,如果你能让我知道如何嵌入鼠标滚动在这个?,javascript,html,css,web,scrollbar,Javascript,Html,Css,Web,Scrollbar,我的css代码:这是用于滚动条视图和滚动条的移动 #updateHolder { /*this describes the outer structure of the scroll bar */ width: 300px; /* <= For Width: change the width value */ color: #333; /***/ margin-top: 10px; /***/ overflow: hidden;

我的css代码:这是用于滚动条视图和滚动条的移动

#updateHolder {      /*this describes the outer structure of the scroll bar  */
    width: 300px;  /* <= For Width: change the width value */
    color: #333;   /***/
    margin-top: 10px;    /***/
    overflow: hidden;    /***/
    border:0px solid #CCCCCC;    /***/
}

#updateContainer {                      /***/
    background-color: white;           /***/
    position: relative;                 /***/
    cursor: pointer;                   /***/    

}

#updateContent {
    background: #fff;
    position: absolute;
    padding-right: 12px;
}

#updateScollBar {                           /***/
    background: #F2F2F2;                       /***/
    border-left: 1px solid #DADADA;              /***/
    position: absolute;
    width: 10px;                             /***/
    right: 0;                              /***/
    bottom: 0;                          /***/
    cursor: default;
    zoom: 1;
    filter: alpha(opacity=25); /* For IE8 and earlier */
    opacity: 0.25;
}

#updateScollScrubber {
    background-color: 909090;
    width: 9px;
    height: 100px;
    position: absolute;
    border-left:1px solid #676767;
    border-top:1px solid #676767;

}

#updateScollBar, #updateContainer, #updateHolder {
    height: 300px; /* <= For Height: change the height value */ }
#updateHold{/*这描述了滚动条的外部结构*/
宽度:300px;/*滚动高度){
//隐藏鼠标上的滚动条。
$(this.animate({opacity:0.25});
$('#updateHolder').unbind(“mousemove”,onMouseMove);
洗涤器。解除绑定(“鼠标向下”,onMouseDown);
}
});
$(“#updateCollbar”).mousedown(函数(){/***/
isScrollBarClick=true/***/
}).mouseout(函数(){
isScrollBarClick=false/***/
}).mouseup(函数(事件){
如果(isScrollBarClick==false)
返回;
if((event.pageY-initContentPos)>(scrollHeight-scriber.outerHeight()){
css({top:(scrollHeight-scriber.outerHeight())});
}否则{
css({top:(event.pageY-initContentPos)-5});
}
$('#updateContent').css({top:((initContentPos-scruber.offset().top)*moveVal)});
});
函数onMouseDown(事件){
$('#updateHolder').bind(“mousemove”,onMouseMove);
$('#updateHolder').bind(“mouseup”,onMouseUp);
_offsetY=scriber.offset().top;
_startY=event.pageY+initContentPos;
//禁用更新区域内的文本选择。否则,在滚动条上拖动时将选择文本。
contentDiv.onselectstart=函数(){return false;}//ie
contentDiv.onmousedown=函数(){return false;}//mozilla
}
mouseMove函数(事件){
isScrollBarClick=false;
//检查滚动区域的上限和下限
if((scriber.offset().top>=initContentPos)和&(scriber.offset().top(initContentPos+scrollHeight-scrollFaceHeight)){
css({top:(scrollHeight-scrollFaceHeight-2)});
$('#updateContent').css({top:(scrollHeight-contentHeight+initPosition)});
}
$('#updateHolder')。触发器('mouseup');
}
}
函数onMouseUp(事件){
$('#updateHolder').unbind(“mousemove”,onMouseMove);
contentDiv.onselectstart=函数(){return true;}//ie
contentDiv.onmousedown=函数(){return true;}//mozilla
}
函数setScruberHeight(){/***/
cH=$('#updateContent').outerHeight();
sH=$('#updatecollbar').outerHeight();
如果(cH>sH){
//将滚动洗涤器的最小高度设置为20
if(sH/(cH/sH)<20{$('UpdatesCollScriber').css({height:20});}else{$('UpdatesCollScriber').css({height:sH/(cH/sH)});}}}鼠标滚轮(dir){scribery=scriber.offset().top+(scrollStep*dir)-initContentPos上的函数({height:sH/(cH/sH);}}}}(滚动高度-scriber.outerHeight()){
css({top:(scrollHeight-scriber.outerHeight())});
}否则{
如果(洗涤器<0)洗涤器=0;
css({top:scrawery});
}
$('#updateContent').css({top:((initContentPos-scruber.offset().top)*moveVal)});
}
/**这是高级功能。
*它必须对增量大于/小于零作出反应。
*/
函数句柄(增量){
if(δ<0){
飞轮(1);
}
否则{
飞轮(-1);
}
}
/**鼠标滚轮事件的事件处理程序/***/
*/
功能控制盘(事件){/***/
var-delta=0/***/
如果(!event)/*用于IE.*//***/
event=window.event/***/
if(event.wheelDelta){/*IE/Opera*/
delta=event.wheeldta/120;
}else if(event.detail){/**Mozilla案例*/
/**在Mozilla中,delta的符号与IE中的符号不同。
*此外,delta是3的倍数。
*/
delta=-event.detail/3;
}
/**如果delta不为零,则处理它。
*基本上,如果滚轮向上滚动,增量现在为正值,
*如果方向盘向下滚动,则为负数。
*/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/
if(增量)
手柄(三角形);
/**防止鼠标滚轮导致的默认操作。
*这可能很难看,但我们不知怎么处理卷轴
*不管怎样,别在这里费心了。。
*/
if(event.preventDefault)
event.preventDefault();
event.returnValue=false;
} });
这里是HTML代码我不确定,但我认为我在这里犯了一些错误

    <link rel="stylesheet" type="text/css" href="Css_file.css" media="screen" />

<div id="updateHolder">
    <div id="updateContainer">
    <div id="updateContent">

//Placing my content here


     Dummy Text <img src="http://articles.tutorboy.com/wp-includes/images/smilies/icon_smile.gif" alt=":)" class="wp-smiley">
    msg
orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
    </div>



    <div id="updateScollBar">
        <div id="updateScollScrubber">
        </div>
    </div>

    </div>
</div>

</body>

</html>

//将我的内容放在这里
虚拟文本
味精
orem Ipsum仅仅是印刷和排版行业的虚拟文本。自16世纪以来,当一位不知名的印刷商拿起一个打印工具,争先恐后地制作一本字体样本书时,Lorem Ipsum一直是印刷和排版行业的标准虚拟文本。它不仅存活了五个世纪,而且还跨越到了电子排版,仍然是必不可少的它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行,最近随着Aldus PageMaker等桌面出版软件包括Lorem Ipsum的版本而流行。Lorem Ipsum只是印刷和排版行业的虚拟文本。Lorem Ipsum一直是行业标准的dumm从16世纪开始,一个不知名的印刷商拿起一个印刷机,把它拼凑成一本活字样本书。它不仅存活了五年
    <link rel="stylesheet" type="text/css" href="Css_file.css" media="screen" />

<div id="updateHolder">
    <div id="updateContainer">
    <div id="updateContent">

//Placing my content here


     Dummy Text <img src="http://articles.tutorboy.com/wp-includes/images/smilies/icon_smile.gif" alt=":)" class="wp-smiley">
    msg
orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
    </div>



    <div id="updateScollBar">
        <div id="updateScollScrubber">
        </div>
    </div>

    </div>
</div>

</body>

</html>
<div id="updateHolder" style="width: 300px; height: 100px; overflow: auto">