滚动条事件js（js监听横向滚动条事件）
本文目录
js监听横向滚动条事件
你要监听的对象错误了。你要监听的是fixedDom
var fixedDom = document.getElementById(’fixed’);
fixedDom.addEventListener(’scroll’,winScroll,false);
function winScroll(e){
debugger
if(fixedDom.offsetLeft 《 document.body.scrollLeft){
};
if(fixedDom.offsetLeft 》 document.body.scrollLeft){
};
}
JS - 滚动事件(onscroll)
当浏览器滚动条滚动时会触发 onscroll 事件，通常情况下指上下滚动条滚动。
需要注意的是，浏览器一旦检测到滚动条发生滚动，就可以触发 onscroll 事件，而无需等到滚动行为结束。
下面的例子演示了一个极普遍的应用：利用 onscroll 事件检测滚动条位置，当向下滚动到一定位置时，在页面右下角会出现“返回顶部”的锚链接，以方便网站用户快速返回顶部。
js,鼠标上下滑轮或者拉动滚动条触发事件
window.onmousewheel = function(){ //触发滚轮事件
}
window.onscroll = function(){ //滚动条事件
}
//其实你的问题直接使用判断滚动条应该就可以了，但是如果一定要拖动滚动条才执行事件，我们可以通过获取鼠标位置来模拟
var a = document.getElementsByTagName("html");
window.onmousemove = function(){
//一般默认滚动条12px宽，当鼠标位于浏览器窗口右边12px内按下鼠标可以视为拖动滚动条
if(innerWidth - event.clientX 《 12){
a.onmousedown = function(){
console.log(1);
}
}else{
a.onmousedown = null;
}
}
如何用js监听滚动条滚动事件
js监视滚动事件的函数是onscroll
js语法：element.onscroll = functionReference
html语法：《element onscroll="myScript"》
《!DOCTYPE html》
《html lang="en"》
《head》
《meta charset="UTF-8" /》
《style》
#container {
position: absolute;
height: auto;
top: 0;
bottom: 0;
width: auto;
left: 0;
right: 0;
overflow: auto;
}
#foo {
height:1000px;
width:1000px;
background-color: #777;
display: block;
}
《/style》
《/head》
《body》
《div id="container"》
《div id="foo"》《/div》
《/div》
《script type="text/javascript"》
// js绑定你需要监控滚动事件的dom，也可以绑定document.body监控整个网页滚动
// 也可以监控具体的dom滚动，像下面的container Id对象
document.getElementById(’container’).onscroll = function() {
console.log("scrolling");
};
《/script》
《/body》
《/html》
当滚动条滚动到页面某个位置时，触发js，怎么去实现
js有滚动条事件，scroll事件，你可以这样写：
window.onscroll = function(){ //绑定scroll事件
var t = document.documentElement.scrollTop || document.body.scrollTop; //获取滚动距离
var top_div = document.getElementById( "top_div" ); //查询并定义div元素
if( t 》= 300 ) { //判断
top_div.style.display = "inline";
} else {
top_div.style.display = "none";
}
}
更多文章：
2026年10月14日 06:20
spring事务的作用（为什么要使用spring的事务，一般在什么情况下使用）
2026年10月14日 05:40
2026年10月14日 04:50
linux怎么进入命令行（怎么样配置linux使其启动时直接登录到命令行模式）
2026年10月14日 02:00
java培训机构好还是大学好（大学生想转行学java，该去java培训班还是自学呢）
2026年10月13日 23:30
2026年10月13日 19:10
2026年10月13日 19:00
前端面试必背十个点（资深HR揭秘：Web前端面试技巧有哪些）
2026年10月13日 17:50
sqlplus重置用户名密码（Oracle中的plus的用户名和密码忘了怎么办）
2026年10月13日 17:40
echarts怎么读英语（echarts怎么设置数据自动排序）
2026年10月13日 17:10
