Javascript模拟scroll滚动效果脚本第1/2页资源-CSDN文库

23 浏览量 2020-10-30 07:16:03 上传评论收藏 48KB PDF 举报

JavaScript中的模拟scroll滚动效果是通过编程方式实现页面滚动，而非依赖浏览器原生的滚动条功能。这在某些情况下非常有用，比如自定义滚动交互、动画效果或者在移动设备上优化用户体验。下面我们将深入探讨如何使用JavaScript实现模拟滚动，以及解决在实现过程中遇到的问题。代码中使用了一个名为`oEventUtil`的对象，它包含两个事件处理方法：`addEventHandler`和`removeEventHandler`。这两个方法分别用于添加和移除事件监听器，以兼容不同的浏览器。在`addEventListener`和`attachEvent`方法不被支持的老版本浏览器中，`oEventUtil`通过直接设置对象的事件属性来实现事件绑定。这是跨浏览器事件处理的一个经典实现。问题一涉及到键盘事件的监听。通常，键盘事件仅在与键盘交互的元素（如输入框）或整个窗口上触发。为了使键盘事件在非表单元素（如div）上生效，你需要确保事件监听器被添加到一个可以捕获键盘事件的元素，如body或document。因此，你可以尝试将`keyup`事件监听器添加到`document`对象上，如下所示： ```javascript oEventUtil.addEventHandler(document, "keyup", test); ``` 这样，无论焦点在哪个元素上，`test`函数都会响应键盘事件。 `test`函数内部检查了按键的keyCode，38对应上箭头，40对应下箭头，分别触发向上或向下的滚动操作。`clickNarrowup()`和`clickNarrowdown()`是预期的滚动操作函数，你需要根据实际需求实现它们。问题二关于在DOM加载完成前获取元素的问题。当JavaScript代码在`<head>`中时，可能在DOM元素加载之前执行，导致`getElementById`找不到对应的元素。为了解决这个问题，你应该将获取元素的代码放到`window.onload`或者`DOMContentLoaded`事件的回调中，确保此时DOM已经完全加载。例如： ```javascript window.addEventListener('DOMContentLoaded', function() { var category_scroll = document.getElementById("category_scroll"); var scroll_hand = document.getElementById("scroll_hand"); var scrollup = document.getElementById("scrollup"); var scrolldown = document.getElementById("scrolldown"); var category_list = document.getElementById("category_list"); }); ``` 或者使用jQuery等库提供的便捷方法： ```javascript $(function() { var category_scroll = $("#category_scroll"); var scroll_hand = $("#scroll_hand"); var scrollup = $("#scrollup"); var scrolldown = $("#scrolldown"); var category_list = $("#category_list"); }); ``` 这样，即使代码位于`<head>`中，也可以确保在DOM准备就绪后正确获取元素。 JavaScript模拟滚动效果涉及事件监听、DOM操作和动画原理。通过适当地绑定事件、处理DOM加载顺序和编写适当的事件处理器，可以实现自定义的滚动交互。同时，要注意兼容不同浏览器的差异，以确保代码在各种环境下都能正常工作。

资源推荐

资源详情

资源评论

Javascript模拟模拟scroll滚动效果脚本第滚动效果脚本第1/2页页

项目需要写了一段模拟Scroll滚动代码，分享的同时，我有些疑问，希望大家能帮忙解决，代码如下

<meta http-

equiv="Content-Type"

content="text/html;

charset=UTF-8">

<title>Insert title

here</title>

<script

type="text/javascript">

var oEventUtil = new

Object();

oEventUtil.addEventHan

dler = function

(oTarget,sType,fnDo){

if(oTarget.addEventListe

ner){

oTarget.addEventListene

r(sType,fnDo,false)

}

if(oTarget.attachEvent)

{

oTarget.attachEvent("on"

+sType,fnDo)

}

else{

oTarget["on"+sType]

= fnDo;

}

oEventUtil.removeEvent

Handler = function

(oTarget,sType,fnDo){

if(oTarget.removeEventLi

stener){

oTarget.removeEventList

ener(sType,fnDo,false)

}

if(oTarget.detachEvent){

oTarget.detachEvent("on

"+sType,fnDo)

}

else{

oTarget["on"+sType]

= null;

}

oEventUtil.getEvent =

function() {

if (window.event) {

return

this.formatEvent(window.

event);

} else {

return

oEventUtil.getEvent.calle

运行代码

复制代码

保存代码

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

现在有个问题就是当点中滚动条后，触发键盘的上下键，来控制上下滚动。然而，一般情况下，键盘事件似乎只针对Form表

单对象和Winsow窗体对象起作用（除IE）,那么当创建事件处理函数时该怎们写呢？

oEventUtil.addEventHandler(category_hand,"keyup",test)，似乎是不行，毕竟category_hand代表的是一个DIV

test()函数如下：

function test(){

//alert("RUN");

var oEvent = oEventUtil.getEvent();

if(oEvent.keyCode==38){

alert("UP");

clickNarrowup();

}

if(oEvent.keyCode==40){

clickNarrowdown();

alert("DOWN");

}

请高手帮忙解答一下。

疑问二:这段代码中，在定义变量的时候我是在HTML中间插入的代码，用于获取对象，如果这段代码插入到window.onload函

数中时，那么很有可能此时这些对象尚未加载，无法读取到而产生程序错误，那么问题就是，如果我想完全将：

var category_scroll = document.getElementById("category_scroll");

var scroll_hand = document.getElementById("scroll_hand");

var scrollup = document.getElementById("scrollup");

var scrolldown = document.getElementById("scrolldown");

var category_list = document.getElementById("category_list");

</script>

引入到<head>之间怎们处理比较好呢？

blueidea版主给出的解决方法

12下一页阅读全文

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余0页未读，立即下载

评论收藏

内容反馈

weixin_38565628

粉丝: 2
资源: 902

Javascript模拟scroll滚动效果脚本第1/2页

jquery + endless-scroll 模拟实现 滚动加载数据

jquery-during-scroll:在用户滚动后执行代码的脚本

js-scroll-effect-module:[v0.10.1] 添加滚动效果

scroll-spy:滚动事件的Javascript库

js代码 无缝滚动效果

jsp ul 下的li 标签循环滚动

屏幕滚动效果

jq实现文字滚动到那一屏幕

js产品图片无缝滚动代码向左和向上图片无缝滚动代码

jquery.parallax-scroll:垂直页面滚动时的平滑视差效果

使用vue-infinite-scroll实现无限滚动效果

tiltedpage-scroll.js创建3D滚动倾斜效果

大气磅礴的网站效果 scroll+easing+animation+水平、竖直滚动

jQuery购买记录列表文字滚动更新代码

js实现文字在按钮上滚动的方法

JS新闻公告文字逐条向上翻滚代码

jquery实现多行文字图片滚动效果示例代码

JS高级应用(一).pdf

drag_n_scroll:通过拖动和滚动使元素可拖动的 Javascript 工具

smooth_scroll:Dart 库可在网页上实现平滑滚动效果

sequence-scroll-effect:序列滚动效果

jQuery插件scroll实现无缝滚动效果

javascript常用对象梳理

js实现DOM走马灯特效的方法

html代码大全

微信小程序实现下滑到底部自动翻页功能

AJAX实现瀑布流触发分页与分页触发瀑布流的方法

最新资源

jquery + endless-scroll 模拟实现滚动加载数据

js代码无缝滚动效果