如果使用jquery的话，可以这样写：
$(window).bind("scroll", function(){var top = $(this).scrollTop() // 当前窗口的滚动距离
})
如果使用原生js，可以这样写（摘自网上的）：
/*** 获取<a href="https://www.baidu.com/s?wd=%E6%BB%9A%E5%8A%A8%E6%9D%A1&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1YzPARYuhu9m1n3mhDknWmd0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnHT1nWmLnW6snH03nHnkPHbYPs" target="_blank" class="baidu-highlight">滚动条</a>距离顶端的距离
* @return {}支持IE6
*/
function getScrollTop() {
var scrollPos
if (window.pageYOffset) {
scrollPos = window.pageYOffset }
else if (document.compatMode && document.compatMode != 'BackCompat')
{ scrollPos = document.documentElement.scrollTop }
else if (document.body) { scrollPos = document.body.scrollTop }
return scrollPos
}
window.onmousewheel = function(){ //触发滚轮事件
}
window.onscroll = function(){ //滚动条事件
}
//其实你的问题直接使用判断滚动条应该就可以了，但是如果一定要拖动滚动条才执行事件，我们可以通过获取鼠标位置来模拟
var a = document.getElementsByTagName("html")[0]
window.onmousemove = function(){
//一般默认滚动条12px宽，当鼠标位于浏览器窗口右边12px内按下鼠标可以视为拖动滚动条
if(innerWidth - event.clientX < 12){
a.onmousedown = function(){
console.log(1)
}
}else{
a.onmousedown = null
}
}
这篇文章主要介绍了JS实现网页滚动条感应鼠标变色的方法,实例分析了javascript针对鼠标事件的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下本文实例讲述了JS实现网页滚动条感应鼠标变色的方法。分享给大家供大家参考。具体实现方法如下：
代码如下:
<html>
<head>
<title>JS实现网页滚动条感应鼠标变色</title>
</head>
<body>
把你的目光转向右侧的滚动条看一下吧？是不是很漂亮噢？鼠标放上还会变换色彩呢？
<br><br><hr>
收集于互联网，只为兴趣与学习交流，不作商业用途。</p>
<script
language="JavaScript">
<!--
function
scrollBar(line,face,theme)
{
if
(!line||!face)
{
line=null
face=null
switch(theme)
{
case
"blue":
var
line="#78AAFF"
var
face="#EBF5FF"
break
case
"orange":
var
line="#FBBB37"
var
face="#FFF9DF"
break
case
"red":
var
line="#FF7979"
var
face="#FFE3DD"
break
case
"green":
var
line="#00C600"
var
face="#D1EED0"
break
case
"neo":
var
line="#BC7E41"
var
face="#EFE0D1"
break
}
}
with(document.body.style)
{
scrollbarDarkShadowColor=line
scrollbar3dLightColor=line
scrollbarArrowColor="black"
scrollbarBaseColor=face
scrollbarFaceColor=face
scrollbarHighlightColor=face
scrollbarShadowColor=face
scrollbarTrackColor="#F3F3F3"
}
}
function
colorBar(){
var
w
=
document.body.clientWidth
var
h
=
document.body.clientHeight
var
x
=
event.clientX
var
y
=
event.clientY
if(x>w)
scrollBar('#000080','#BFDFFF')
//
Your
colors
else
scrollBar(null,null,"neo")
//
A
predefined
theme
}
if
(document.all){
scrollBar(null,null,"neo")
document.onmousemove=colorBar
}
//-->
</script>
<br
/>
<div
style="width:100%height:1000px"></div>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。
