水平拖拽滚动条

Posted liudaihuablogs

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了水平拖拽滚动条相关的知识，希望对你有一定的参考价值。

【教学视频】网页特效_水平拖拽滚动条案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>由于8的不适用复杂嵌套的盒子，如果父盒子太多且都定位的话，8不在适用，不利于后期封装</title>
    <style>
        *{margin:0;padding:0;}
        .line {
            width: 400px;
            height: 10px;
            background-color: #CCC;
            margin: 100px;
            position: relative;
        }
        .line .tag {
            width: 10px;
            height: 30px;
            background-color: #ec5c00;
            position: absolute;
            top: -10px;
            left: 0;
            cursor: pointer;
        }
        .line .bc {
            width: 0;
            height: 10px;
            background-color: #0e90d2;
        }
    </style>
</head>
<body>
<div class="line" id="line">
    <div class="tag"></div>
    <div class="bc"></div>
</div>
</body>
</html>
<script>
    var line = document.getElementById("line");
    var tag = line.children[0];
    var bc = line.children[1];

    leDrag(bc,tag);

    /**
     *  address:
     *  水平拖动
     * @param target 受bar拖动而改变背景的目标盒子
     * @param bar
     */
    function leDrag(target,bar) {
        var step = 0;
        bar.onmousedown = function(event) {
            var event = event || window.event;
            // bar被按下的位置距离浏览器左窗口距离
            var barLeft = event.clientX - this.offsetLeft;

            document.onmousemove = function(event) {
                var event = event || window.event;
                step = event.clientX-barLeft;
                if(step<0){
                    step = 0;
                }else if(step>bar.offsetParent.offsetWidth - bar.offsetWidth){
                    step = bar.offsetParent.offsetWidth - bar.offsetWidth;
                }
                bar.style.left = step + "px";
                target.style.width = step + "px";

                // 清除选择拖动，不写这句话，会出现如果滑的快，弹起后依旧跟着鼠标走
                window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
            }
            //  是document的onmouseup事件，不是tag的
            document.onmouseup = function() {
                // 清除事件
                document.onmousemove = null;
            }
        }
    }
</script>

技术分享图片

 

以上是关于水平拖拽滚动条的主要内容，如果未能解决你的问题，请参考以下文章

DuiLib怎样控制list不出现水平滚动条

如何隐藏水平滚动条并保持垂直滚动条可见，同时仍然能够水平滚动？

如何在 MS Word 文档中显示代码片段，因为它在 *** 中显示（滚动条和灰色背景）

c# winform scroll 滚动条 滚动到底

带有行号的 Pygments HTML 表格 - 代码单元的水平滚动条

有没有人使用水平滚动条中的“滚动箭头”来滚动位置？