Div滚动条随鼠标滚动js版（由网友JQuery版改写而成）资源-CSDN文库

共2个文件

html：1个

js：1个

4星 · 超过85%的资源需积分: 32 35 浏览量 2011-01-21 10:18:12 上传评论 3 收藏 1KB RAR 举报

在网页设计中，有时我们需要对特定的`div`元素实现自定义滚动条的效果，以便增强用户体验。本项目提供了一个JavaScript版本的解决方案，该方案最初基于jQuery实现，经过修改后适用于纯JavaScript环境，解决了在IE8浏览器下由于`onSelectStart="return false"`或者`onfocus()`事件处理导致的`div`内滚动条无法滚动的问题。让我们深入理解这个问题。在某些情况下，为了防止用户在`div`内选择文本，开发者会添加`onSelectStart="return false"`属性，这会禁用默认的文本选择行为。然而，这种做法在IE8中可能会导致一个副作用：`div`内的滚动条失去响应，无法通过鼠标滚轮进行滚动。同样，如果`div`元素有`onfocus()`事件，当用户点击其他地方使`div`失去焦点时，滚动条也会失效。为了解决这个问题，这个JavaScript版本的滚动条解决方案提供了一种新的处理方式。它监听了鼠标滚轮事件，并根据滚动事件来改变`div`内容的位置，模拟出滚动条的效果。这种方法的关键在于正确计算滚动距离，确保内容在视觉上平滑移动，同时保持与实际滚动条操作一致的用户体验。以下是一些关键知识点： 1. **DOM事件监听**：JavaScript可以通过`addEventListener`方法监听DOM元素的事件，如`mousewheel`事件（在现代浏览器中是`wheel`事件），用于捕捉用户的滚轮操作。 2. **CSS样式控制**：为了实现自定义滚动条，可能需要使用CSS3的伪元素`::-webkit-scrollbar`和`::-webkit-scrollbar-thumb`等，但请注意，这些样式仅在Webkit内核的浏览器（如Chrome和Safari）中有效。对于IE8，可能需要借助JavaScript来创建和控制滚动条的外观。 3. **滚动位置计算**：在处理滚轮事件时，需要获取当前`div`的滚动位置，并根据滚轮的滚动方向和速度计算出新的滚动位置，然后使用`scrollTop`属性设置`div`的滚动位置。 4. **浏览器兼容性处理**：由于不同浏览器对滚动事件和滚动条的支持程度不同，编写JavaScript代码时需要考虑跨浏览器兼容性，可能需要用到像`event.wheelDelta`（旧版本Firefox和IE）或`event.deltaY`（现代浏览器）这样的特性来检测滚动方向和幅度。 5. **阻止默认行为**：为了防止原生滚动行为，可能需要调用`event.preventDefault()`来阻止默认的滚轮事件处理。 6. **焦点管理**：解决`onfocus()`导致的问题可能需要在`div`失去焦点时恢复其滚动功能，可以通过监听`blur`事件并移除阻止滚动的条件来实现。 7. **性能优化**：为了提高滚动的流畅度，应避免在滚动事件处理函数中执行过于复杂的操作，以免影响用户体验。这个JavaScript解决方案通过监听滚轮事件并手动控制`div`的滚动位置，有效地解决了在IE8下`div`内滚动条无法滚动的问题。在实际应用中，开发人员需要根据具体项目需求和目标浏览器范围进行适当的调整和优化。

资源推荐

资源详情

资源评论

收起资源包目录

div_scroll.rar （2个子文件）

div_scroll

drag.html 2KB

div_scroll.js 1KB

<HTML> <HEAD> <TITLE> New Document </TITLE> <script type="text/javascript" src="div_scroll.js"></script> </HEAD> <BODY> 该示例由网友的基于JQuery的示例修改而成，谢谢作者！ <div style="border:1px solid red;width:400px;height:300px;overflow:scroll;overflow-x:hidden;display:block"> <div onMouseMove="div_scroll(this,event)"> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </div> </div> </BODY> </HTML>

评论收藏

内容反馈