Custom scrollable div issue keeping scroller in container

Question

I'm trying to create a custom div scroller.

So close! How can I keep the scroller within the confines of the container?

I am trying to avoid JavaScript libraries like jQuery for this.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <style type="text/css">
        #content {
            height: 500px;
            width: 500px;
            overflow: hidden;
            border: solid 1px red;
        }

        #scr {
            height: 100px;
            width: 100px;
            top: 100px;
            left: 50px;
            position: absolute;
            border: solid 1px black;
            background-color: #26a0eb;
            z-index: 3;

        }       
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div id="content" style="margin-top:100px;">
            <div id="scr">
            </div>

            <div id="container">
              see demo above for scrollable content
            </div>

        </div>
    </form>

    <script type="text/javascript">

        window.onload = function () {
            //help from http://stackoverflow.com/a/13152737/139698
            draggable('scr');
        };

        var dragObj = null;
        function draggable(id) {
            var obj = document.getElementById(id);
            obj.style.position = "absolute";
            obj.onmousedown = function () {
                dragObj = obj;
            }
        }

        document.onmouseup = function (e) {
            dragObj = null;
        };

        document.onmousemove = function (e) {
            var y = e.pageY;  //scroller

            if (dragObj == null)
                return;

            var c = document.getElementById('content');
            //var b = document.getElementById('scrbox');       
                /*
                1. scr.top - scrbox.top = x
                2. x / scrbox height = pct
                3. scroll top = scroll height * pct
                */

                var x = y - c.offsetTop;
                var pct = x / c.clientHeight;
                c.scrollTop = Math.floor(c.scrollHeight * pct);


                dragObj.style.top = (y-50) + 'px'; //50 is an offset                
        };
    </script>
</body>
</html>

If this is working code that you are not having an issue with, but are generally looking for suggestions on how to improve it, please use http://codereview.stackexchange.com/. — Mark Hildreth, Oct 01 '13 at 16:43
Thanks for the tip http://codereview.stackexchange.com/q/32077/30247 — Rod, Oct 01 '13 at 16:55
You're welcome. I'm still not sure what you mean by "how do you move the div without it repositioning top of div to cursor after scrolling?". Whether you post here or on codereview, you will probably need to be much more careful in phrasing your questions as clearly as possible, being specific. For visual problems, it might help to include screenshots of what you're attempting to do. — Mark Hildreth, Oct 01 '13 at 17:04

score 0 · Answer 1 · answered Oct 01 '13 at 19:39

it won't work on touchscreen in some browsers, use touchbegin, touchmove, touchend events to improve touch support, also try to use as much static positioning as it's possible, absolute or relative positioning will cause heavy performance drop while scrolling. i'd recommend also wheel support

Custom scrollable div issue keeping scroller in container

1 Answers1