首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么当我在JS文件中写JS代码时,我的JS onscroll函数不起作用?

当在JS文件中编写JS代码时,可能会遇到JS onscroll函数不起作用的情况。这可能是由于以下几个原因导致的:

  1. 元素选择错误:首先,需要确保你正确选择了需要绑定onscroll事件的元素。可以使用document.getElementById()或document.querySelector()等方法来获取元素,并确保元素的ID或选择器是正确的。
  2. 事件绑定错误:确保你正确地将onscroll事件绑定到了目标元素上。可以使用addEventListener()方法来绑定事件,例如:element.addEventListener('scroll', function() { ... })。
  3. 元素没有滚动:onscroll事件只在元素内容发生滚动时触发。因此,如果你的元素没有足够的内容或没有设置滚动条,onscroll事件将不会触发。可以通过设置元素的overflow属性为"scroll"或"auto"来启用滚动条。
  4. 代码执行顺序问题:如果你的JS代码在页面加载完成之前执行,可能会导致无法正确绑定onscroll事件。可以将JS代码放在window.onload事件处理程序中,确保在页面完全加载后再执行JS代码。
  5. 其他JS代码冲突:可能存在其他JS代码与onscroll事件冲突,导致事件无法正常触发。可以通过在浏览器的开发者工具中检查控制台错误信息来排查可能的冲突。

总结起来,当在JS文件中编写JS代码时,onscroll函数不起作用可能是由于元素选择错误、事件绑定错误、元素没有滚动、代码执行顺序问题或其他JS代码冲突等原因导致的。需要仔细检查代码,并确保正确地选择元素、绑定事件,并在适当的时机执行代码。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

通过d.ts文件,让VSCode在写js代码时能够有智能提示代码补全

在学习wpsjs开发过程中,非常痛苦的是写js代码时没有智能提示,写惯了.NET静态语言后来写js代码,这个没有智能提示太难受了,特别是引用第三方工具类时。...同理,在wpsjs项目里,官方也为我们提示了一个类型库,用于作开发过程中的代码提示,在他们的demo上也带有了。 ?...所以现阶段也只能按最上面的方式,在控制台里敲代码,然后复制粘贴了。 当我们用npm安装了对应的types库后,代码提示就出来了。 ?...对于我们面向浏览器端的js编写,最终是通过在script标签上引用js文件的,但开发过程中,貌似直接使用npm install命令将其整个库拉到本地来使用,可以更方便,并且也有了智能提示。...额外补充:使用TypeScript智能提示写ECharts的Option 在js上有智能提示,但它的提示度也是有限的,上面所说的@types的方式安装d.ts文件,这个其实是用来给本意是给TypeScript

11.2K30

手把手带你10分钟手撸一个简易的Markdown编辑器

「编辑区」和「展示区」的页面同步滚动 编辑器工具栏中工具的实现 这里先放上我最终实现好了的效果图: 我也将本文的代码放在了 Github 仓库 (opens new window)上了,欢迎各位点个...这里放上这个库的API文档(opens new window) highlight.js 默认是检测它所支持的所有语言的语法的,我们就不需要关心了,并且其提供了很多的代码高亮主题,我们可以在官网进行预览...具体的可以看markdown-it中文官网 - 高亮语法配置(opens new window) 同时在目录highlight.js/styles/下有很多很多的主题,可以自行导入 接下来就来实现一下代码高亮的功能吧...,但是两个区域仍然在不停的滚动,这是为什么呢?...在我已经发布的markdown-editor-reactjs (opens new window)中,已经完成了其它工具的实现,想要看代码的可以去源码里看 七、补充 为了保证包的体积足够小,我将第三方依赖库

1.5K20
  • 手把手带你10分钟手撸一个简易的Markdown编辑器

    「编辑区」和「展示区」的页面同步滚动 编辑器工具栏中工具的实现 这里先放上我最终实现好了的效果图: ?...这里放上这个库的API文档(opens new window) highlight.js 默认是检测它所支持的所有语言的语法的,我们就不需要关心了,并且其提供了很多的代码高亮主题,我们可以在官网进行预览...具体的可以看markdown-it中文官网 - 高亮语法配置(opens new window) 同时在目录highlight.js/styles/下有很多很多的主题,可以自行导入 接下来就来实现一下代码高亮的功能吧...同步滚动的效果实现了,但能很明显得看到,当我手动滚动完以后停止了任何操作,但是两个区域仍然在不停的滚动,这是为什么呢?...在我已经发布的markdown-editor-reactjs (opens new window)中,已经完成了其它工具的实现,想要看代码的可以去源码里看 七、补充 为了保证包的体积足够小,我将第三方依赖库

    2.1K10

    React-Native iOS 列表(ListView)优化方案

    views 非常的小,并且读取时占的资源很少, 你可以调整这个值,在找到适合你的值。...View,我把它形成一个组件,把它 Bridge 到 JS,这就使得,你在写 JSX 的时候,就可以直接用 VirtualView 来去做布局了。...4.用 JS 实现一套 cell 重用的逻辑 基于 RN 的 ScrollView,我们也监听 OnScroll(),他往上滑的时候,我们需要把上面的 cellComponent 挪下来,挪到上面去用。...如果你希望有一个界面滚动能够达到流畅的话,所有的处理都需要在 16ms 内完成,但是这又造成了 onScroll 都要去刷新页面,导致这样的交互会非常非常多,导致你从 JS,到 native 的 bridge...要频繁的通讯,JS 中的很多处理方式都是异步的,使得这个方案的效果没有达到很好的预期。

    1.9K20

    Next.js 越来越难用了

    为什么选择 Next.js 而不是 Create React App 当我首次接触 Next.js 时,它当时的“竞争对手”是 Create React App(简称 CRA)。...当时我所有的项目都是基于 CRA 来开发的,但之后我选择转向 Next.js,主要有两大原因: 我偏爱基于文件的路由方式,因为它让我能够减少样板代码的编写。...尽管这些新功能十分有趣,但最大的损失在于简单性的减少。 当框架未按预期工作时 作为开发者,我们都曾有过这样的经历:面对代码难题时,往往会感到困惑并大声问道:“为什么这不起作用?”...对我来说,如果问题并非源于代码本身的 bug,而是源于对事物工作原理的误解,那就会更加令人头疼。 此时,你不再只是疑惑:“为什么这不起作用?”而是开始思考:“为什么它这样工作……而不是那样?”...关于这个主题,GitHub 上有一个非常热门的问题的解答,我将在这里分享部分内容: 当我们深入思考时,问题“为什么我无法访问 pathname 或当前 URL?”

    23810

    网页中代码的顺序是不可忽略的细节

    仿佛奇怪的问题总是喜欢找上那些初学者。当我在学习制作网页的时候,经常遇到一些很特别的问题。例如:刚刚添加的样式不起作用、jQuery 的代码老是不起作用等等,这些问题往往是不关注细节导致的。...而今天我要谈的这个细节,就是关于网页中代码的顺序。没错,代码也是有顺序的,顺序不对有可能会出现一些意外的情况。 HTML 相关的代码顺序 下面先来介绍 HTML 中的代码顺序。...这也就是为什么 CSS 引用要写在 head 里面。...如果有时候,你真的无法修改加载文件的顺序,那么面对这种情况,你可以使用 CSS 中的 !important 语法,告诉浏览器要使用这个属性解决冲突。...CSS 中,有的属性既可以分开写,也可以合并起来写。

    1.1K30

    移动端滚动研究

    方案比较 第一种方案由于惯性滚动的时机时由js自己控制所以可以拿到滚动触发阶段的scrolltop值,并且滚动的回调函数onscroll在滚动的阶段都会触发。...第二种方案相比第一种要劣势一些,区别在于手指离开时,采用的时css的animation来实现惯性滚动,所以无法直接触发惯性滚动过程中的onscroll事件,只有在animation结束时才可以借助animationend...在使用模拟滚动时,浏览器在js层面会消耗更多的性能去改变dom元素的位置,在dom复杂层级深的页面更为高,所以在长列表滚动时还要使用正常滚动更好。...节流(Throttling) 防抖函数确实不错,但是也存在问题,譬如图片的懒加载,我希望在下滑过程中图片不断的被加载出来,而不是只有当我停止下滑时候,图片才被加载出来。...节流函数,只允许一个函数在 X 毫秒内执行一次。 与防抖相比,节流函数最主要的不同在于它保证在 X 毫秒内至少执行一次我们希望触发的事件 handler。 关于防抖动与节流,我的博客文章也有提及。

    3.2K20

    鸿蒙OS中的 JS开发框架与源码

    当然我最感兴趣的就是鸿蒙的 JS 框架 ace_lite_jsfwk,从名字中可以看出来这是一个非常轻量级的框架,官方介绍说是“轻量级 JS 核心开发框架”。 当我看完源码后发现它确实轻。...当我们观察某个对象时,也就是劫持这个对象属性的操作,还包括一些数组函数,比如 push、pop 等。这个文件应该是代码最多的,160 行。observer 的代码就更简单了,五六十行。...它能够在内存少于 64 KB 的设备上执行 ECMAScript 5.1 源代码。这也是为什么在文档中说鸿蒙 JS 框架支持 ECMAScript 5.1 的原因。...从整体看这个 js 框架大概使用了 96% 的 C/C++ 代码,1.8% 的 JS 代码。在 htm 文件中写的组件会被编译为原生组件。...但是在 C/C++ 代码中并没有看到 yoga 相关的内容(全局搜索没发现)。而 SDK 中的那些包仅仅是做 loader 用的,大概是为了在 webpack 打包时解析 htm 组件用的。

    1.6K42

    跨平台 ListView 性能优化

    和 ScrollView 完全是一个东西,我觉得好像 RN 只是埋了一个坑期望社区在社区的演进中解决。...前端的同学觉得我们可以改进 RN 中 ListView 的 JS 实现,通过在 onScroll 事件中将被移除出去的 Cell Dom 元素通过 JS 把他们移动到需要复用的位置上 而客户端的同学认为通过把...用JS写一套Cell的重用逻辑 先说说前端的想法,我们实现完了之后,它实现的方式是说,也是基于 RN 的 ScrollView,我们也监听 OnScroll(),哪些 View 可以补上来?...我们创建一些 VirtualView,他只是遵从了 RCTComponent 协议,他其实并不是一个真正的 View,我把它形成一个组件,把它 Bridge 到 JS,这就使得,你在写 JSX 的时候,...而且我感觉还有一点JS代码可读性和iOS其实差挺多的。JS都会也需要进行打包转译,你写的时候是一种样子,运行的时候是另外一个样子。 Q7:咱们JS这块的代码的质量是怎么保证的?

    1.3K120

    JavaScript函数节流和函数防抖之间的区别

    一、概念解释 函数节流和函数防抖,两者都是优化高频率执行js代码的一种手段。  大家大概都知道旧款电视机的工作原理,就是一行行得扫描出色彩到屏幕上,然后组成一张张图片。...在一定时间内,代码执行的次数不一定要非常多。达到一定频率就足够了。因为跑得越多,带来的效果也是一样。倒不如,把js代码的执行次数控制在合理的范围。...这是函数节流最形象的解释。 函数防抖是指频繁触发的情况下,只有足够的空闲时间,才执行代码一次。比如生活中的坐公交,就是一定时间内,如果有人陆续刷卡上车,司机就不会开车。...("函数节流"); canRun = true; }, 300); }; 函数节流的要点是,声明一个变量当标志位,记录当前代码是否在执行。  ...其实,用队列的方式也可以做到这种效果。这里就不深入了。 四、在线demo ? 这是我写的一个测试demo,把鼠标移动到模块上方,滚动滚轮,即可在控制台查看输出效果。

    1.1K21

    6 大主流 Web 框架优缺点对比:15篇前端热文回看

    当我们开始写这个系列博客的时候,我们知道 JavaScript/web 应用框架并不太好总结。我们努力对这个不可回答的问题作出回答:我该用什么样的框架?...48 个有用的 JavaScript 代码片段,该用户的代码可以让程序员在 30 秒甚至更少的时间内理解这些经常用到的基础算法,来看看这些 JavaScript 代码都传达出了什么吧!...这其中的一些小技巧在低版本中是没有的,所以建议大家用最新版的,目前最新版是62,版本很重要,如果发现有些技巧不起作用,请先查看浏览器的版本。...这里提一个小点,我们在业务开发过程中,经常会重复用到 日期格式化、 url参数转对象、 浏览器类型判断、 节流函数等一类函数,这些工具类函数,基本上在每个项目都会用到,为避免不同项目多次复制粘贴的麻烦,...及为什么网上多数答案都是错的:15篇前端热文回看》 4月:《纯 CSS3 实现小黄人动效:10 篇前端热文回看》 2月:《不装逼地说,在 Google 到底能学到啥:重温 10 篇热文》 觉得本文对你有帮助

    1.2K60

    什么年代还在用传统 Pjax? —— 自定义 Pjax 提升页面加载速度

    之前我也想过对博客和主题加入 Pjax 支持,但经过一番分析后觉得,这不仅引入了一个巨大的 jquery.pjax.js,反而优化效果不明显。 原理 其实,Pjax 的原理并不复杂。...我们只要 #page-main 中的主要内容。 最重要的是,Hexo 是静态博客,这一点只能在生成文件时进行。 载入 HTML 我是用 Cheerio 模块帮我完成这一工作。...page-main").html() // 我这么写是因为主题 #page-main 下还有 script 无法执行 rtData.page = ` <div class="mg-top...).html()); $pageMain('script').map(function(i, el) { // 尝试往 extraJS 中 push 相关代码 try...fs.writeFileSync(filepath, JSON.stringify(rtData)); } 文件递归 我们还需要一个函数递归 public 目录下的所有文件,这个不用多说。

    2.9K20

    解决在bootstrap模态框modal里使用clipboard.js时复制失效

    前言 最近在写网站项目时,遇到一个问题 当我在bootstrap模态框modal中使用clipboard.js时,复制功能不起作用,但是在模态对话框之外的使用却没有任何问题 而从其他元素复制文本时复制功能依旧有效...,但如果我从属性复制文本,却不起作用,data-clipboard-text属性失效 正文 后来发现是由于Bootstrap的模态强制执行焦点,导致第三方库(包括Clipboard.js)出现问题 通过执行以下操作来关闭此功能...版权属于:Xcnte' s Blog(除特别注明外) 本文链接:https://www.xcnte.com/archives/640/ 本站文章采用 知识共享署名4.0 国际许可协议 进行许可,请在转载时注明出处及本声明

    2.2K20

    涨见识了!脱离vue项目竟然也可以使用响应式API

    直接上代码 话不多说,直接上代码。这个是我在本地新建的一个最简单的node.js项目,如下图: 从上图可以看到我们的node.js项目依赖只有一个:vue。...并且提供了一个名为dev的脚本命令,这个脚本命令实际是在node环境内执行index.js文件。...文件是在node.js环境中运行的,所以这里我特地使用require去导入vue导出的ref、watch、watchEffect这三个响应式API。...在终端执行yarn dev,也就是执行node index.js,如下图: 从上图中可以看到在node.js中的执行结果和预期是一模一样的。 为什么可以这样写呢?...在我们这个demo中count是一个ref的响应式变量,当我们对count变量进行读操作时会触发get拦截。当我们对count变量进行写操作时会触发set拦截。

    17510

    webpack4.41+性能优化(高级篇)

    ,很多博客写的多进程,为此我查阅github的happypack插件说明明确说到是多线程。...}) } 那么你只要修改了math.js里面的代码,就只会热更新,执行这里module.hot.accept的第二个参数----回调函数中的内容。...有人可能会问了,这里在onlick事件里面,我没去点击按钮,没触发这个回调你怎么知道我回调函数里面有个预加载或者懒加载?...webpack在处理文件路径时,默认在Unix是/,在Windows是\,[\\/]避免在跨平台使用时出现问题 分割chunk组规则里的优先级priority有什么用?...对于一个日期处理的功能,为何这个库会占用如此大的体积,仔细查看发现当引用这个库的时候,所有的locale文件都被引入,而这些文件甚至在整个库的体积中占了大部分,因此当webpack打包时移除这部分内容会让打包文件的体积有所减小

    78510

    Angular中sweetalert弹框的使用详解

    所以我就想办法将sweetalert用到项目中,在项目中引入sweetalert时,遇到诸多问题,但最终在我不懈坚持下,都解决了,实现了效果。具体用法请看下文。...点击取消执行else中的方法 ? 点击确定直接执行函数 ?...五、相关问题 1、传函数错误 Swal(“确定提交吗”,  function(){}, ‘error’ );  //这种写法在我用的这个版本中是错误的,我的这个版本支持then(), 不支持直接在参数中写方法...2、API问题 在这个版本中以下写法只能实现title和text的效果,其他属性都不起作用 1 swal({ 2 title: "确定删除吗?"..., "你的虚拟文件已经被删除。", "success"); 12 }); 在这个版本中只能按照我最上面所列举的去实现,那是我在官方英文文档中发现的,中文文档太坑了。

    2.8K40
    领券