首页
学习
活动
专区
工具
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文件,让VSCodejs代码能够有智能提示代码补全

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

10.9K30

手把手带你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),已经完成了其它工具实现,想要看代码可以去源码里看 七、补充 为了保证包体积足够小,将第三方依赖库

    2K10

    Next.js 越来越难用了

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

    16810

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

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

    1.8K20

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

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

    1.1K30

    鸿蒙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

    移动端滚动研究

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

    3.2K20

    跨平台 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.1K60

    什么年代还在用传统 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 <em>中</em> push 相关<em>代码</em> try...fs.writeFileSync(filepath, JSON.stringify(rtData)); } <em>文件</em>递归 我们还需要一个<em>函数</em>递归 public 目录下<em>的</em>所有<em>文件</em>,这个不用多说。

    2.7K20

    解决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执行结果和预期是一模一样为什么可以这样呢?...我们这个democount是一个ref响应式变量,当我们对count变量进行读操作时会触发get拦截。当我们对count变量进行操作时会触发set拦截。

    16910

    JavaScript运行命令

    问题背景 一段脚本,运行顺序是先将js文件alert()运行了一遍,然后当我详细调用到那个函数时候再运行这个函数。...当了解了前提之后我们知道,我们js代码是须要通过浏览器JavaScript解析引擎解析运行,详细解析机制大家能够google一下,对这部分了解不深,仅仅知道了解各大概。...对于编译和运行内部详细运行就不清楚了。 js代码页面运行顺序 上面讲到都是一些理论知识。以下就来看看我们实际应用过程中会js代码页面运行顺序。...文件流载入完毕之后—依照事件机制改变js运行顺序 类似于调用函数,在哪里调用到就在此处运行,假设没有调用到就不运行。从上面的代码能够看到。为a标签加入了点击事件。...同一js还要依据HTML文档流顺序运行。 这就是运行自定义函数之前过程,而我所以运行自定义函数事实上是事件机制调用js一个体现。 版权声明:本文博客原创文章。

    74820

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

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

    75710

    Angularsweetalert弹框使用详解

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

    2.8K40
    领券