Javascript滚动处理程序未触发
Javascript Scroll Handler not firing
我所要做的就是在滚动DIV
时调用函数。为了简单起见,我没有指定其他任何东西。此外,我只看DOM兼容的浏览器,如Chrome, Safari(不是IE)。
我的问题是滚动处理程序从未被调用。如果我将scroll
替换为click
,点击即可正常工作。不知怎么的,滚动条不工作了
请注意:我不能使用jQuery:(
下面是我的代码: HTML:<div id="test">--long content--</div>
JS:
function myFunc() {
console.log('in myFunc');
}
var objTable = document.getElementById("test");
objTable.addEventListener("scroll", function () {
myFunc();
}, false);
小提琴:
http://jsfiddle.net/yymg5/7/这是因为窗口在滚动,而不是div。尝试将元素侦听器更改为div(在本例中是窗口)的父元素,如下所示:
window.addEventListener("scroll", function () {
myFunc();
}, false);
我也遇到过类似的问题。这段代码是正确的,未定义
已经回答了window.addEventListener("scroll", function () {
myFunc();
}, false);
但是没有工作,因为
滚动事件未触发。因为我的body在滚动而不是documentElement.
我刚刚从我的body标签中删除了height: 100%
,然后滚动事件开始触发
如果滚动事件没有触发,尽管尽了最大努力,你可以试试wheel event:
document.addEventListener('wheel', (event) => {console.log('i scrolled')});
在我的情况下,我有一个height: 100%
在我的身体。因为我只想在一个特殊的div中应用滚动事件。
然后,这解决了这个问题:
document.querySelector('#myDiv').addEventListener('scroll', () => {
console.log('scroll event fired!')
});
我通过从html
和body
CSS选择器中删除height: 100%;
来修复它。
这是因为你的div有height: 100%
或height: 100vh
。在这种情况下,滚动事件将自动禁用,如果你给高度:
移除div的高度,移除其父,子div的高度。基本上,那个特定的div应该滚动,而不是它的父或子div。
那么这应该可以工作。
const AppWrapper = document.getElementById('app-content');
AppWrapper.addEventListener('scroll', toggleVisibility);
toggleVisibility = () => {
console.log('Do your thg');
};
相关文章:
- 滚动到Rails 4应用程序中的顶部jQuery
- 具有Twitter引导程序的水平滚动表
- 网络驱动程序中使用的向下滚动功能从网页的哪个部分进行搜索
- 试图让我的引导程序navabar背景淡出滚动在我的wordpress主题
- 如何使用引导程序创建自定义滚动条
- 如何制作在向下滚动时更改大小的引导程序标头
- css 和 JavaScript 像 iOS 照片应用程序一样滚动
- 如何在滚动时将jQuery fadeIn添加到Angular应用程序中
- 在移动应用程序上滚动iframe会在某个时刻跳到页面顶部
- 在引导程序中向下滚动时,菜单不显示
- Chrome标签或书签滚动会影响angular应用程序
- 使用Twitter引导程序's Scrollspy到延迟加载(滚动加载)异步JavaScript
- Django应用程序中的滚动图像
- 部分禁用全屏iOS web应用程序中的滚动反弹
- 将引导程序下拉选择滚动条居中到所选项目
- 引导程序 3:滚动条
- 引导程序滚动导航栏问题
- 我如何使用appium驱动程序滚动到元素id
- Sencha Touch应用程序滚动&谷歌Chrome版本43.0.2357.125(64位)中的Ext.car
- 当通话/热点指示灯可见时,停止phonegap应用程序滚动