个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 04:58:37 26 4
gpt4 key购买 nike

如果你看这里:

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/

26 4 0
文章推荐： html - SVG 径向进度条在 Safari 中不旋转，有什么解决方法吗？
文章推荐： jquery - 移动设备的选择语句
文章推荐： javascript - 如何使用 Typescript 中的方法从远程 js 文件动态扩展类？
文章推荐： javascript - $http.post 奇怪的行为
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com