首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    JS简易整页滚动

    fullPage超简易版本 1.知识点 JS 滚动监听事件 JS 移动端touch监听事件 函数节流 DOM操作 2.示例GIF ?...CSS html, body设置 overflow 为 hidden, 让视图中只包括一个分页;设置滑动分页的长宽都是 100%; 外部容器设置 transition 过渡效果, 并设置为相对定位, 滚动是修改外部容器的...Top 值, 实现滚动效果. html, body { padding: 0; margin: 0; overflow: hidden; } .page-container { position...向下滚动时, 当 currentPosition 比 -整体分页高度 大的时候(绝对值相比小的时候), 向下滚动;向上滚动时, 当 currentPosition 大于 0 的时候, 向上滚动. /...滚动事件firefox与其他浏览器的事件不同, 所以需要进行判断. deltaY大于0的时候, 想下滚动; 反之, 向上滚动. var handlerWheel = throttle(scrollMove

    15.6K31

    JS判断滚动条是否停止滚动

    背景:昨天一个同事有种需求,有一个展示数据区域的div,带滚动条,当滚动滚动时,需要向后台发请求,计算数据,再拿到前台展示。        ...分析:由于数据量级别较大,所以当滚动滚动时,如果时时向后台发请求,对服务器和浏览器都造成巨大的压力。想到的解决方案是,当滚动条停止时,再去发请求计算数据。...那么问题来了,如何判断滚动条是否停止了呢?        解决:搜索了一下,js本身是无法判断滚动条是在滚动状态还是停止状态,只有通过其它方式了。...后来想到的思路是当滚动滚动的时候,发起一个定期执行的方法,并记录一次当前滚动条到顶部的距离,这个方法中判断此时滚动条到顶部的距离是否和上次记录的相等,如果相等,那么说明停止滚动了,不相等,还在滚动。...-- // 让浏览器出现滚动条 for(var i = 0; i < 100; i++) { document.write(""); } var topValue = 0,//

    17.4K00

    js以及three.js场景截

    来来来,说正事 在手机端截完全不需要前端动什么脑子,但是在网页上截就很头疼了,我这里介绍两种情形,针对普遍和某一特殊功能需求 1、js插件html2canvas.js 这个插件真的很好用,而且GitHub... js: html2canvas(document.querySelector("#capture")).then(canvas => { document.body.appendChild...(canvas) }); 2、js原生代码截 如果你只是要截取canvas里面的内容,那就很简单了。...因为我是用在three.js这个3d项目的场景里面,所以没用过这个库的朋友可能没遇到过bug。那就是截出来的图片是空白的,场景scene后期渲染的比如灯光,加载的模型都没有截图截下来。...antialias: true, alpha: true, preserveDrawingBuffer :true }) 第二种方法就是在截图之前先渲染一下场景和相机,就不会实时刷新屏幕,导致我们截下来的是空白了

    8.5K20

    页应用首问题

    为什么页应用首次打开会比较慢,我的理解是全局注入的东西如果比较多,那么第一次加载确实会比较慢。...3、服务端渲染(ssr),以前一直以为服务端渲染只是为了seo,后来才知道解决首问题,这才是最大的优化。...这边顺便说一下为什么有利于seo,页应用的项目,你右键查看源代码,dom结构只有一个id是root的div,浏览器刚打开扫描dom的时候只有这个div,后面通过js注入了,但是扫描已经结束了,所以不利于...简单来说就是一进入页面就把马上看到的先加载,其他的通过滚动也好通过监听也好,进行懒加载。 6、缓存,这个其实也算是很好的一个方法,无非就是强缓存和协商缓存,就是服务器那边配置的。...另外,我对ssr也是感触不大,想想,还是觉得为了seo可以去选择,或者真的要那种对首优化要到毫秒级的才需要。

    1.5K20

    从“”到“多”,乡村教育能否突破困局?

    在传统教育背景下,无论城镇还是乡村,老师授课、学生上课只通过“黑板”这一块来汲取和分享知识。...多形态 “和家伴学”通过多多端互动技术,提供大中小畅学的多形态教育内容。这意味着,乡村儿童能借助大电视、中音箱、小手机等终端,随时随地进行学习,不再仅限于“”。...尤其在疫情期间,“和家伴学”充分发挥电视“第三块”学习的优势,在一周内快速上线全国20省,将城市学校宣贯丰富在线学习内容通过家庭大呈现给乡村学生,实现“停课不停学,成长不停歇”。...,也可通过大小联动与家人一起PK,在寓教于乐中提升对学习的兴趣。...从“”到“多”的背后,能看到的不仅仅是产品服务上的更新迭代,还有对乡村教育痛点问题的解决,数字技术助力乡村教育摆脱困局的新路径。

    52150
    领券