5
\$\begingroup\$

I'm trying to create a custom div scroller. I got it working, but it's still a little rough around the edges. Please take a look..

DEMO

<%@ 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 {
            margin-top: 100px;
            height: 500px;
            width: 500px;
            overflow: hidden;
            border: solid 1px red;
        }

        #scr {
            height: 100px;
            width: 100px;
            border: solid 1px black;
            background-color: #26a0eb;
            z-index: 3;
            opacity: 0;
            filter: alpha(opacity = 0);
        }


        #content:hover #scr {
            opacity: 0.1;
            filter: alpha(opacity = 10);
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div id="content">
            <div id="scr">
            </div>
            <div id="container">
                <script type="text/javascript">
                    var strContent = '';
                    for (var i = 1; i < 101; i++) {
                        document.writeln(i + '<br />');
                    }
                </script>
            </div>
        </div>
    </form>
    <script type="text/javascript">

        window.onload = function () {
            draggable('scr');
        };

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

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

        document.onmousemove = function (e) {
            if (!e) e = window.event;
            var y = (e.pageY) ? e.pageY : e.clientY;

            if (scr == null)
                return;

            var c = document.getElementById('content');

            if ((y >= c.offsetTop + 50) && (y < c.clientHeight + 50)) {
                var pct = (scr.offsetTop - c.offsetTop) / (c.clientHeight - 50);
                c.scrollTop = Math.floor(c.scrollHeight * pct);
                scr.style.top = y - 50 + 'px';
            }
        };
    </script>
</body>
</html>
\$\endgroup\$
0

1 Answer 1

Reset to default
3
\$\begingroup\$

Just focusing on the Javascript:

  • I feel a urge to to reference a story about a monk. Instead I'll just say that descriptive names will help when you come back to your code or when others try to read it.
    for example:

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

    Here it would be better to name obj something like draggableElement or some such. this was I know instantly what we are referring to.

  • You are testing e and pageY and assigning a variable in two different way. Pick one way and be consistent about it. It really matters not what you choose so much as sticking to it.

    Here are a couple of different ways you could do it.

    1. if

      if (!e) e = window.event;
var y = e.pageY;
if(!y) y = e.clientY;

    2. ternary

      e = e ? e : window.event;
var y = e.pageY ? e.pageY : e.clientY;

    3. or 

      e = e || window.event;
var y = e.pageY || e.clientY;

    I personally favour this last way.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.