js,鼠标上下滑轮或者拉动滚动条触发事件

JavaScript012

js,鼠标上下滑轮或者拉动滚动条触发事件,第1张

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

}

}

我用的是两个DIV嵌套实现

<html>

<head>

<title>autoScrollText</title>

<style>

#outside{

height:100px

width:300px

border:1px solid black

overflow:hidden

float:left

}

</style>

<script>

var timeId//定时器

var timelong = 30//移动速度

function back(){

clearInterval(timeId)

var node = document.getElementById("content")

var vtop = node.offsetTop

timeId = setInterval(function(){

vtop -= 1

if(vtop <document.getElementById("outside").offsetHeight - node.offsetHeight){

alert("到底部了")

clearInterval(timeId)

}else{

node.style.top = vtop

}

},timelong)

}

function forward(){

clearInterval(timeId)

var node = document.getElementById("content")

var vtop = node.offsetTop

timeId = setInterval(function(){

vtop += 1

if(vtop >= 0){

alert("到顶部了")

clearInterval(timeId)

}else{

node.style.top = vtop

}

},timelong)

}

</script>

</head>

<body>

<div id="outside">

<div id="content" style="position:absolute">

<font color="green">first</font>testtest<br>

testtesttesttest<br>

testtesttesest<br>

tdfgesttesttasdfesttest<br>

dsfgtesttestasdftesttesafasdfst<br>

tdfgdsfgesttesasdfafsttesttasdfest<br>

fdgdfgtesttesttesttest<br>

asdftesttasdfesttesttest<br>

testtesttesttest<br>

asdfasftesttesttesttest<br>

testtesttesttest<br>

asdfasftesttestasdftesttest<br>

testtestasfdtesttest<br>

asdfasftesttesttesttest<br>

testtestasdftesttest<br>

asdfasftesttesasdfttesttest<br>

asdfadsftesttesttesttest<br>

<font color="red">last</font>festtesttesttest<br>

</div>

</div>

<div>

<input type="button" onClick="forward()" value="上移"><br>

<input type="button" onClick="back()" value="下移">

<div>

</body>

</html>