New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Custom Scrollbar

Telerik products Telerik products Telerik products

Lorem Ipsum Dolor Sit Amet

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi ac mi. Suspendisse laoreet faucibus nibh. Quisque justo. Mauris pharetra magna ut felis. Nullam rhoncus pulvinar risus. Sed turpis dui, consequat ut, molestie vel, congue vel, mi. Nunc luctus venenatis ipsum. Nulla non mauris ut lorem aliquam tincidunt. Phasellus tincidunt augue at orci.

Phasellus eu sapien et dolor pharetra aliquam. Praesent tellus. In nonummy, nibh quis tincidunt varius, sem pede vehicula neque, eget dapibus augue odio non dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla egestas, nisl id blandit hendrerit, erat dui ullamcorper leo, nec aliquet sem ligula in nulla. Pellentesque tristique. Suspendisse sagittis. Nam in augue. Praesent iaculis justo non dolor. Aenean quis lacus. Nam facilisis mauris in tellus. Pellentesque vitae diam in massa commodo tincidunt. Integer molestie elit rutrum nunc. Suspendisse velit orci, suscipit eget, sagittis at, pellentesque feugiat, erat. Nulla sit amet orci a tellus varius malesuada. Nunc adipiscing vehicula leo. Donec condimentum libero volutpat orci. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque pulvinar. Sed lectus. Aliquam in felis ut nisi malesuada interdum.

This is a sample application scenario which shows how to implement a simple custom scrollbar with RadSlider. You can use the slider to scroll the content of the DIV element.

  • DefaultCS.aspx
  • scripts.js
  • styles.css
<%@ Page Language="c#" AutoEventWireup="false"  %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
    <script src="scripts.js" type="text/javascript"></script>
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-wide no-bg">
        <div class="boxes">
            <div id="boxesWrapper" class="wrapper">
                <div id="boxesContent" class="content">
                    <img src="Images/Boxes.jpg" alt="Telerik products" />
                    <img src="Images/Boxes.jpg" alt="Telerik products" />
                    <img src="Images/Boxes.jpg" alt="Telerik products" />
                </div>
            </div>
        </div>
        <div class="boxesSlider">
            <telerik:RadSlider RenderMode="Lightweight" ID="RadSliderProducts" runat="server" SmallChange="1" Width="224" Value="0"
                Orientation="Horizontal" OnClientValueChanged="demo.sliderScrollProducts" OnClientLoad="demo.sliderProductsClientLoad"
                Skin="WebBlue">
            </telerik:RadSlider>
        </div>
        <div class="textSlider">
            <div id="textWrapper" class="wrapper">
                <div id="textContent" class="content">
                    <h2>Lorem Ipsum Dolor Sit Amet</h2>
                    <p>
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi ac mi. Suspendisse
                        laoreet faucibus nibh. Quisque justo. Mauris pharetra magna ut felis. Nullam rhoncus
                        pulvinar risus. Sed turpis dui, consequat ut, molestie vel, congue vel, mi. Nunc
                        luctus venenatis ipsum. Nulla non mauris ut lorem aliquam tincidunt. Phasellus tincidunt
                        augue at orci.
                    </p>
                    <p>
                        Phasellus eu sapien et dolor pharetra aliquam. Praesent tellus. In nonummy, nibh
                        quis tincidunt varius, sem pede vehicula neque, eget dapibus augue odio non dolor.
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla egestas, nisl id
                        blandit hendrerit, erat dui ullamcorper leo, nec aliquet sem ligula in nulla. Pellentesque
                        tristique. Suspendisse sagittis. Nam in augue. Praesent iaculis justo non dolor.
                        Aenean quis lacus. Nam facilisis mauris in tellus. Pellentesque vitae diam in massa
                        commodo tincidunt. Integer molestie elit rutrum nunc. Suspendisse velit orci, suscipit
                        eget, sagittis at, pellentesque feugiat, erat. Nulla sit amet orci a tellus varius
                        malesuada. Nunc adipiscing vehicula leo. Donec condimentum libero volutpat orci.
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque pulvinar.
                        Sed lectus. Aliquam in felis ut nisi malesuada interdum.
                    </p>
                </div>
            </div>
            <telerik:RadSlider RenderMode="Lightweight" ID="RadSliderText" runat="server" SmallChange="1" Height="224" Value="0"
                Orientation="Vertical" OnClientValueChanged="demo.sliderScrollText" OnClientLoad="demo.sliderTextClientLoad"
                Skin="WebBlue">
            </telerik:RadSlider>
        </div>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance