自定义可滚动 div 问题将滚动条保留在容器中答案

【问题标题】：Custom scrollable div issue keeping scroller in container自定义可滚动 div 问题将滚动条保留在容器中
【发布时间】：2013-10-01 16:34:23
【问题描述】：

我正在尝试创建一个自定义 div 滚动条。

See DEMO

如此接近！如何将滚动条保持在容器的范围内？

为此，我试图避免使用像 jQuery 这样的 JavaScript 库。

<%@ 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>

【问题讨论】：

如果这是您没有问题的工作代码，但通常正在寻找有关如何改进它的建议，请使用codereview.stackexchange.com。
感谢您的提示codereview.stackexchange.com/q/32077/30247
不客气。我仍然不确定您的意思是“如何移动 div 而不会在滚动后将 div 的顶部重新定位到光标？”。无论您是在此处发帖还是在 codereview 上发帖，您都可能需要更加小心地表达您的问题，尽可能清晰、具体。对于视觉问题，包含您正在尝试执行的操作的屏幕截图可能会有所帮助。

标签： javascript

【解决方案1】：

它在某些浏览器的触摸屏上不起作用，使用 touchbegin、touchmove、touchend 事件来改进触摸支持，也尽量使用尽可能多的静态定位，绝对或相对定位会导致滚动时性能严重下降。我还推荐车轮支撑

【讨论】：