代码之家 › 专栏 › 技术社区 › yaylitzis

使用鼠标按下事件滚动页面

jquery javascript

yaylitzis · 技术社区 · 1 年前

我在页面上放了两个按钮。当你点击它们时,页面向下/向上滚动,效果很好。我试图替换事件 click 与 mousedown 事件,以便在mousedown事件期间滚动页面,但它不起作用。

$(document).on('click', 'a.scroll-down', function(e) {
  $('html,body').animate({
    scrollTop: $(window).scrollTop() + 300
  }, 500, 'easeOutSine');
  e.preventDefault();
});

$(document).on('click', 'a.scroll-up', function(e) {
  $('html,body').animate({
    scrollTop: $(window).scrollTop() - 300
  }, 500, 'easeOutSine');
  e.preventDefault();
});

我在这里错过了什么?

$(document).on('click', 'a.scroll-down', function(e) {
  $('html,body').animate({
    scrollTop: $(window).scrollTop() + 10
  }, 500, 'easeOutSine');
  e.preventDefault();
});

$(document).on('mousedown', 'a.scroll-up', function(e) {
  $('html,body').animate({
    scrollTop: $(window).scrollTop() - 10
  }, 500, 'easeOutSine');
  e.preventDefault();
});

.scroll-down {
  position: fixed;
  right: 0.2rem;
  bottom: 1rem;
  width: 2.75rem;
  height: 2.75rem;
  text-align: center;
  color: #fff;
  background: rgba(90, 92, 105, 0.5);
  line-height: 46px;
}

.scroll-down:focus,
.scroll-down:hover {
  color: white;
}

.scroll-down:hover {
  background: #5a5c69;
}

.scroll-down i {
  font-weight: 800;
}

.scroll-up {
  position: fixed;
  right: 0.2rem;
  bottom: 4rem;
  width: 2.75rem;
  height: 2.75rem;
  text-align: center;
  color: #fff;
  background: rgba(90, 92, 105, 0.5);
  line-height: 46px;
}

.scroll-up:focus,
.scroll-up:hover {
  color: white;
}

.scroll-up:hover {
  background: #5a5c69;
}

.scroll-up i {
  font-weight: 800;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/js/all.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet" />


<body id="page-top">
  <div id="wrapper">
    <div id="content">
      <div class="container-fluid">
        <div class="row mb-4">
          <div class="col-6">
            <button class="btn btn-block btn-primary">mybutton</button>
          </div>
        </div>

        <div class="row mb-4">
          <div class="col-6">
            <button class="btn btn-block btn-primary">mybutton</button>
          </div>
        </div>

        <div class="row mb-4">
          <div class="col-6">
            <button class="btn btn-block btn-primary">mybutton</button>
          </div>
        </div>

        <div class="row mb-4">
          <div class="col-6">
            <button class="btn btn-block btn-primary">mybutton</button>
          </div>
        </div>

        <div class="row mb-4">
          <div class="col-6">
            <button class="btn btn-block btn-primary">mybutton</button>
          </div>
        </div>

        <div class="row mb-4">
          <div class="col-6">
            <button class="btn btn-block btn-primary">mybutton</button>
          </div>
        </div>

        <div class="row mb-4">
          <div class="col-6">
            <button class="btn btn-block btn-primary">mybutton</button>
          </div>
        </div>

        <div class="row mb-4">
          <div class="col-6">
            <button class="btn btn-block btn-primary">mybutton</button>
          </div>
        </div>

        <div class="row mb-4">
          <div class="col-6">
            <button class="btn btn-block btn-primary">mybutton</button>
          </div>
        </div>

        <div class="row mb-4">
          <div class="col-6">
            <button class="btn btn-block btn-primary">mybutton</button>
          </div>
        </div>

        <div class="row mb-4">
          <div class="col-6">
            <button class="btn btn-block btn-primary">mybutton</button>
          </div>
        </div>

        <div class="row mb-4">
          <div class="col-6">
            <button class="btn btn-block btn-primary">mybutton</button>
          </div>
        </div>

        <div class="row mb-4">
          <div class="col-6">
            <button class="btn btn-block btn-primary">mybutton</button>
          </div>
        </div>

        <div class="row mb-4">
          <div class="col-6">
            <button class="btn btn-block btn-primary">mybutton</button>
          </div>
        </div>

        <div class="row mb-4">
          <div class="col-6">
            <button class="btn btn-block btn-primary">mybutton</button>
          </div>
        </div>

        <div class="row mb-4">
          <div class="col-6">
            <button class="btn btn-block btn-primary">mybutton</button>
          </div>
        </div>

      </div>
    </div>
  </div>

  <a class="scroll-up rounded" href="#">
    <i class="fas fa-angle-up"></i>
  </a>
  <a class="scroll-down rounded" href="#">
    <i class="fas fa-angle-down"></i>
  </a>
</body>

1 回复 | 直到 1 年前

Rory McCrossan Hsm Sharique Hasan 1 年前

使用mouseup事件,因为当用户按下鼠标按钮时,它将被触发,然后mousedown事件被触发。mousedown事件起作用,但由于在mouseup事件之后触发,其时间、滚动位置或比例以及窗口大小必须用于快速滚动。

我已经使用您的代码尝试了mousedown事件,它可以工作,但由于经过的时间、滚动位置或比例以及窗口大小较低,滚动速度较慢。

在我看来,最好使用mouseup

$(document).on('mouseup', 'a.scroll-down', function(e) {
  $('html,body').animate({
    scrollTop: $(window).scrollTop() + 300
  }, 500, 'easeOutSine');
  e.preventDefault();
});

$(document).on('mouseup', 'a.scroll-up', function(e) {
  $('html,body').animate({
    scrollTop: $(window).scrollTop() - 300
  }, 500, 'easeOutSine');
  e.preventDefault();
});

.scroll-down {
  position: fixed;
  right: 0.2rem;
  bottom: 1rem;
  width: 2.75rem;
  height: 2.75rem;
  text-align: center;
  color: #fff;
  background: rgba(90, 92, 105, 0.5);
  line-height: 46px;
}

.scroll-down:focus,
.scroll-down:hover {
  color: white;
}

.scroll-down:hover {
  background: #5a5c69;
}

.scroll-down i {
  font-weight: 800;
}

.scroll-up {
  position: fixed;
  right: 0.2rem;
  bottom: 4rem;
  width: 2.75rem;
  height: 2.75rem;
  text-align: center;
  color: #fff;
  background: rgba(90, 92, 105, 0.5);
  line-height: 46px;
}

.scroll-up:focus,
.scroll-up:hover {
  color: white;
}

.scroll-up:hover {
  background: #5a5c69;
}

.scroll-up i {
  font-weight: 800;
}

<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Mouse</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/js/all.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet" />

</head>

<body id="page-top">
  <div id="wrapper">
    <div id="content">
      <div class="container-fluid">
        <div class="row mb-4">
          <div class="col-6">
            <button class="btn btn-block btn-primary">mybutton</button>
          </div>
        </div>

        <div class="row mb-4">
          <div class="col-6">
            <button class="btn btn-block btn-primary">mybutton</button>
          </div>
        </div>

        <div class="row mb-4">
          <div class="col-6">
            <button class="btn btn-block btn-primary">mybutton</button>
          </div>
        </div>

        <div class="row mb-4">
          <div class="col-6">
            <button class="btn btn-block btn-primary">mybutton</button>
          </div>
        </div>

        <div class="row mb-4">
          <div class="col-6">
            <button class="btn btn-block btn-primary">mybutton</button>
          </div>
        </div>

        <div class="row mb-4">
          <div class="col-6">
            <button class="btn btn-block btn-primary">mybutton</button>
          </div>
        </div>

        <div class="row mb-4">
          <div class="col-6">
            <button class="btn btn-block btn-primary">mybutton</button>
          </div>
        </div>

        <div class="row mb-4">
          <div class="col-6">
            <button class="btn btn-block btn-primary">mybutton</button>
          </div>
        </div>

        <div class="row mb-4">
          <div class="col-6">
            <button class="btn btn-block btn-primary">mybutton</button>
          </div>
        </div>

        <div class="row mb-4">
          <div class="col-6">
            <button class="btn btn-block btn-primary">mybutton</button>
          </div>
        </div>

        <div class="row mb-4">
          <div class="col-6">
            <button class="btn btn-block btn-primary">mybutton</button>
          </div>
        </div>

        <div class="row mb-4">
          <div class="col-6">
            <button class="btn btn-block btn-primary">mybutton</button>
          </div>
        </div>

        <div class="row mb-4">
          <div class="col-6">
            <button class="btn btn-block btn-primary">mybutton</button>
          </div>
        </div>

        <div class="row mb-4">
          <div class="col-6">
            <button class="btn btn-block btn-primary">mybutton</button>
          </div>
        </div>

        <div class="row mb-4">
          <div class="col-6">
            <button class="btn btn-block btn-primary">mybutton</button>
          </div>
        </div>

        <div class="row mb-4">
          <div class="col-6">
            <button class="btn btn-block btn-primary">mybutton</button>
          </div>
        </div>

      </div>
    </div>
  </div>

  <a class="scroll-up rounded" href="#">
    <i class="fas fa-angle-up"></i>
  </a>
  <a class="scroll-down rounded" href="#">
    <i class="fas fa-angle-down"></i>
  </a>
</body>

</html>