javascript - 在固定按钮上拖动滚动条

标签 javascript css mobile scroll

如果你看这里:

https://jsfiddle.net/8s8uamhq/1/

您会看到一堆蓝色和绿色的框。您可以使用窗口上的普通滚动条在此页面上左右、上下滚动。

我想更改它，以便如果您单击并按住右上角的箭头键，则可以那样滚动，并且在您滚动时箭头键仍保持在原位。

目的是将此添加到网络应用程序中，以便它可以在平板电脑上使用此按钮进行滚动，同时触摸屏幕可用于其他操作。

js fiddle 页面的完整 html 如下所示:

<html>
  <head>

    <title></title>
    <meta content="">

    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>

    <style>
    #movearrow {
        position: fixed;
        top: 45px;
        right: 20px;
        z-index:99999;
        font-size: 2.5em;
        text-shadow: 0px 0 white, 0 2px white, 0px 0 white, 0 -2px white;
        cursor: grab; cursor : -o-grab; cursor : -moz-grab; cursor : -webkit-grab;
    }
    .blue, .green {
        height: 200px;
        width: 200px;
    }
    .blue {
        background-color: blue;
    }
    .green {
        background-color: green;
    }
    .column {
        float: left;
    }
    div {
        display: inline-block;
        white-space: nowrap;
    }
    </style>
  </head>

  <body>

  <span id="movearrow" class="dragscroll glyphicon glyphicon-move"></span>

  <div class=column>
    <div class=green > </div>
    <div class=blue > </div>
    <div class=green > </div>
    <div class=blue > </div>
    <div class=green > </div>
    <div class=blue > </div>
    <div class=green > </div>
    <div class=blue > </div>
    <div class=green > </div>
    <div class=blue > </div>
    <div class=green > </div>
    <div class=blue > </div>
  </div>

  <div class=column>
    <div class=blue > </div>
    <div class=green > </div>
    <div class=blue > </div>
    <div class=green > </div>
    <div class=blue > </div>
    <div class=green > </div>
    <div class=blue > </div>
    <div class=green > </div>
    <div class=blue > </div>
    <div class=green > </div>
    <div class=blue > </div>
    <div class=green > </div>
  </div>


  <div class=column>
    <div class=green > </div>
    <div class=blue > </div>
    <div class=green > </div>
    <div class=blue > </div>
    <div class=green > </div>
    <div class=blue > </div>
    <div class=green > </div>
    <div class=blue > </div>
    <div class=green > </div>
    <div class=blue > </div>
    <div class=green > </div>
    <div class=blue > </div>
  </div>

  <div class=column>
    <div class=blue > </div>
    <div class=green > </div>
    <div class=blue > </div>
    <div class=green > </div>
    <div class=blue > </div>
    <div class=green > </div>
    <div class=blue > </div>
    <div class=green > </div>
    <div class=blue > </div>
    <div class=green > </div>
    <div class=blue > </div>
    <div class=green > </div>
  </div>

  <div class=column>
    <div class=green > </div>
    <div class=blue > </div>
    <div class=green > </div>
    <div class=blue > </div>
    <div class=green > </div>
    <div class=blue > </div>
    <div class=green > </div>
    <div class=blue > </div>
    <div class=green > </div>
    <div class=blue > </div>
    <div class=green > </div>
    <div class=blue > </div>
  </div>

  <div class=column>
    <div class=blue > </div>
    <div class=green > </div>
    <div class=blue > </div>
    <div class=green > </div>
    <div class=blue > </div>
    <div class=green > </div>
    <div class=blue > </div>
    <div class=green > </div>
    <div class=blue > </div>
    <div class=green > </div>
    <div class=blue > </div>
    <div class=green > </div>
  </div>

  <div class=column>
    <div class=green > </div>
    <div class=blue > </div>
    <div class=green > </div>
    <div class=blue > </div>
    <div class=green > </div>
    <div class=blue > </div>
    <div class=green > </div>
    <div class=blue > </div>
    <div class=green > </div>
    <div class=blue > </div>
    <div class=green > </div>
    <div class=blue > </div>
  </div>

  <div class=column>
    <div class=blue > </div>
    <div class=green > </div>
    <div class=blue > </div>
    <div class=green > </div>
    <div class=blue > </div>
    <div class=green > </div>
    <div class=blue > </div>
    <div class=green > </div>
    <div class=blue > </div>
    <div class=green > </div>
    <div class=blue > </div>
    <div class=green > </div>
  </div>

  <div class=column>
    <div class=green > </div>
    <div class=blue > </div>
    <div class=green > </div>
    <div class=blue > </div>
    <div class=green > </div>
    <div class=blue > </div>
    <div class=green > </div>
    <div class=blue > </div>
    <div class=green > </div>
    <div class=blue > </div>
    <div class=green > </div>
    <div class=blue > </div>
  </div>

  <div class=column>
    <div class=blue > </div>
    <div class=green > </div>
    <div class=blue > </div>
    <div class=green > </div>
    <div class=blue > </div>
    <div class=green > </div>
    <div class=blue > </div>
    <div class=green > </div>
    <div class=blue > </div>
    <div class=green > </div>
    <div class=blue > </div>
    <div class=green > </div>
  </div>

  <div class=column>
    <div class=green > </div>
    <div class=blue > </div>
    <div class=green > </div>
    <div class=blue > </div>
    <div class=green > </div>
    <div class=blue > </div>
    <div class=green > </div>
    <div class=blue > </div>
    <div class=green > </div>
    <div class=blue > </div>
    <div class=green > </div>
    <div class=blue > </div>
  </div>

  <div class=column>
    <div class=blue > </div>
    <div class=green > </div>
    <div class=blue > </div>
    <div class=green > </div>
    <div class=blue > </div>
    <div class=green > </div>
    <div class=blue > </div>
    <div class=green > </div>
    <div class=blue > </div>
    <div class=green > </div>
    <div class=blue > </div>
    <div class=green > </div>
  </div>

  </body>

</html>

最佳答案

要在点击/鼠标按下/触摸时触发事件，您需要使用 jQuery 或 JavaScript。我在我的解决方案中使用了 jQuery 2.1.3，但您也可以用 Pure JS 编写它。

我还在您的#movearrow 范围内插入了虚假链接，这样我们就可以在单击顶部箭头时向上滚动页面，在单击向左箭头时向左滚动，等等。

HTML:

<span id="movearrow" class="glyphicon glyphicon-move">
    <a href="#" id="left"></a>
    <a href="#" id="top"></a>
    <a href="#" id="right"></a>
    <a href="#" id="bottom"></a>
</span>

CSS:

#movearrow a {
    position: absolute;
    width: 50%;
    height: 50%;
    z-index: 9999999;
    display: block;
}

#movearrow a#left {
    left: 0;
    top: 25%;
    bottom: 25%;
    right: 50%;
}

#movearrow a#right {
    right: 0;
    top: 25%;
    bottom: 25%;
    left: 50%;
}

#movearrow a#bottom {
    bottom: 0;
    top: 50%;
    left: 25%;
    right: 25%;
}

#movearrow a#top {
    top: 0;
    bottom: 50%;
    left: 25%;
    right: 25%;
}

jQuery:

$(document).ready(function() {
    var $top = $("#top"),
        $left = $("#left"),
        $right = $("#right"),
        $bottom = $("#bottom");
    var scrollPxW = $(".column").children().first().outerWidth(); // horizontal amount scrolled
    var scrollPxH = $(".column").children().first().outerHeight(); // vertical amount scrolled
    $("#movearrow").children("a").click(function() {
        return false; // removes function of anchor link
    });
    $bottom.on({ // for the bottom arrow
        'mousedown touchstart': function() {
        // animate scrollTop position of body & html
            $("html, body").animate({
                scrollTop: "+=" + scrollPxH + "px"
            });
        },
        'mouseup touchend': function() {
        // when hold event finishes, stop animation
            $("html, body").stop(true);
        }
    });
    $top.on({
        'mousedown touchstart': function() {
        // animate scrollTop position of body & html
            $("html, body").animate({
                scrollTop: "-=" + scrollPxH + "px"
            });
        },
        'mouseup touchend': function() {
        // when hold event finishes, stop animation
            $("html, body").stop(true);
        }
    });
    $right.on({
        'mousedown touchstart': function() {
        // animate scrollLeft position of body & html
            $("html, body").animate({
                scrollLeft: "+=" + scrollPxW + "px"
            });
        },
        'mouseup touchend': function() {
        // when hold event finishes, stop animation
            $("html, body").stop(true);
        }
    });
    $left.on({
        'mousedown touchstart': function() {
        // animate scrollLeft position of body & html
            $("html, body").animate({
                scrollLeft: "-=" + scrollPxW + "px"
            });
        },
        'mouseup touchend': function() {
        // when hold event finishes, stop animation
            $("html, body").stop(true);
        }
    });
});

jsFiddle:https://jsfiddle.net/8s8uamhq/1/

如果你想让它在点击而不是点击+按住时，你可以只使用点击事件，比如:

$top.click(function(){
    $("html, body").animate({
        scrollTop:"-=" + scrollPxH + "px"
    });
});

关于javascript - 在固定按钮上拖动滚动条，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40253496/

上一篇：JavaFX ScrollPane如何设置透明背景

下一篇：jquery - 移动设备的选择语句

相关文章：

javascript - 在多页面模板中的页面之间导航后，Jquery 移动面板停止工作

css - 如何在 R 中使用 render.3dmovie 函数的 vertex.css.class 选项

jquery - 如何使用 jQuery 和 CSS 将 HTML 元素居中？

flutter 悬停式触摸处理 - 无需抬起手指即可检测来自不同小部件的触摸

javascript - 如何检查两个字符串是否具有相同的字符(包括特殊字符)

javascript - 是否可以在 JavaScript 中对声音进行分层？

css - 在页面加载时启动 CSS 动画

javascript - 有没有办法让跨平台溢出:scroll

mobile - 在移动 Web 应用程序中包含条码扫描器而不使用原生？

javascript - 设置style.display=none后优雅的javascript重新调整

©2024 IT工具网  联系我们