自定义滚动容器

• 下载源代码 - 22.42 KB

介绍 

有很多不同的 JavaScript 实现的自定义滚动区域，但我没有找到我需要的，所以我自己创建了一个。

大多数这些滚动条都有一个滚动条，这不是我需要的。此滚动条的典型用法是将滚动按钮添加到某些没有它们的控件或内容中。我将其用于向 AJAX 控件添加滚动功能（我不会通过命名来宣传其开发者，它是一个相当著名的控件）。

使用示例（应用于第三方 AJAX 手风琴控件的顶部和底部滚动按钮）：

请注意，示例源代码没有您在屏幕截图中看到的所有这些图像和样式，因为此 UI 设计将在真实的商业产品中使用，我没有权限公开分发它。

背景   

它非常易于使用，因为您无需为想要滚动的每个 DIV 元素编写 JavaScript 代码来初始化滚动条。只需设置 HTML+CSS 并包含 3 个 JavaScript 文件，滚动条就会出现。

使用方法

我使用 jQuery 创建的，因此您需要添加一些 JavaScript 包含项才能使用它。

以下是使用此滚动区域所需的所有包含项

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.mousewheel.js"></script>
<script type="text/javascript" src="scrollarea.js"></script>	

应具有滚动的 DIV 元素应如下所示

    <div class="scrollable" style="width: 250px; height: 250px;">
        <span class="scrollup"></span>
        <div class="scrollcontent" id="scroll" style="width: 250px; 
			height: 230px; background-color: #FFFF90;">
            ...content... 
        </div>
        <span class="scrolldown"></span>
    </div> 

具有 CSS 类“scrollable”的 DIV 应该包含其中的所有元素。具有类“scrollup”、“scrolldown”、“scrollleft”和“scrollright”的 Span 元素用于创建将滚动放置在具有“scrollcontent”类的 DIV 中的内容的按钮。

在自定义 CSS 文件中更改所有这些类，以实现所需的滚动按钮外观。