可通过按钮滚动 Div 且无滚动条

Question

我知道这个主题已经被讨论过很多次，但我所查看和尝试的一切都不太奏效。希望提供我的实际代码会导致解决方案。我已经向上滚动了，但是向下按钮什么也没做。尝试使用按钮仅在此 "homeBlogs" div 内滚动。这是我正在使用的代码：

$(document).ready(function() {
  $("#upClick").click(function() {
    $('#homeBlogs').scrollTop($('#homeBlogs').scrollTop() + 400);
  });

  $("#downClick").click(function() {
    $('#homeBlogs').scrollTop($('#homeBlogs').scrollTop() - 800);
  });

});

#homeBlogs {
  background-color: #878787;
  height: 400px;
  overflow: hidden;
}
#scrollUp {
  background-color: black;
  text-align: center;
  color: white;
  margin-left: auto;
  cursor: pointer;
}
#scrollDown {
  background-color: black;
  text-align: center;
  color: white;
  margin-left: auto;
  margin-top: -15px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-4 hidden-xs hidden-sm">
  <div class="row" id="scrollUp">
    <button id="downClick"><i class="fa fa-chevron-circle-up fa-2x"></i>
    </button>
  </div>
  <div id="homeBlogs">
    <div class="row">
      <h3 class="blogTitle">Blog Title</h3>
    </div>
    <div class="row" id="blogFeed1">
      <div class="col-md-12 hidden-sm hidden-xs">
        <img class="img-responsive" src="https://placehold.it/100x100" id="thumbNail1" />
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
      </div>
    </div>
    <div class="row">
      <h3 class="blogTitle">Blog Title</h3>
    </div>
    <div class="row" id="blogFeed2">
      <div class="col-md-12 hidden-sm hidden-xs">
        <img class="img-responsive" src="https://placehold.it/100x100" id="thumbNail2" />
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
      </div>
    </div>
    <div class="row">
      <h3 class="blogTitle">Blog Title</h3>
    </div>
    <div class="row" id="blogFeed3">
      <div class="col-md-12 hidden-sm hidden-xs">
        <img class="img-responsive" src="https://placehold.it/100x100" id="thumbNail3" />
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
      </div>
    </div>
  </div>
  <div class="row" id="scrollDown">
    <button id="downClick"><i class="fa fa-chevron-circle-down fa-2x"></i>
    </button>
  </div>
</div>

Answer 1

这是我能为您提供的最佳起点，重叠部分存在一些问题，但也许这会有所帮助？

<script>
$(document).ready(function() {
    $(document).on( "click", "#upClick", function() {
        var top = $("#blogFeed1").css('margin-top').replace(/[^-\d\.]/g, '');
        $("#blogFeed1").css('margin-top', top+100+'px');
     }); 

    $(document).on( "click", "#downClick", function() {
        var top = $("#blogFeed1").css('margin-top').replace(/[^-\d\.]/g, '');
        $("#blogFeed1").css('margin-top', top-100+'px');
     }); 

});
</script>

Answer 2

您有两个 ID 为 downClick 的按钮，没有 ID 为 upClick 的按钮。

$(document).ready(function() {
  $("#upClick").click(function() {
    console.log('Before:'+$('#homeBlogs').scrollTop());
    $('#homeBlogs').scrollTop($('#homeBlogs').scrollTop() + 400);
    console.log('After:'+$('#homeBlogs').scrollTop());
  });

  $("#downClick").click(function() {
    console.log('Before:'+$('#homeBlogs').scrollTop());
    $('#homeBlogs').scrollTop($('#homeBlogs').scrollTop() - 800);
    console.log('After:'+$('#homeBlogs').scrollTop());
  });

});

#homeBlogs {
  background-color: #878787;
  height: 400px;
  overflow: hidden;
}
#scrollUp {
  background-color: black;
  text-align: center;
  color: white;
  margin-left: auto;
  cursor: pointer;
}
#scrollDown {
  background-color: black;
  text-align: center;
  color: white;
  margin-left: auto;
  margin-top: -15px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-4 hidden-xs hidden-sm">
  <div class="row" id="scrollUp">
    <button id="downClick"><i class="fa fa-chevron-circle-up fa-2x"></i>
    </button>
  </div>
  <div id="homeBlogs">
    <div class="row">
      <h3 class="blogTitle">Blog Title</h3>
    </div>
    <div class="row" id="blogFeed1">
      <div class="col-md-12 hidden-sm hidden-xs">
        <img class="img-responsive" src="https://placehold.it/100x100" id="thumbNail1" />
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
      </div>
    </div>
    <div class="row">
      <h3 class="blogTitle">Blog Title</h3>
    </div>
    <div class="row" id="blogFeed2">
      <div class="col-md-12 hidden-sm hidden-xs">
        <img class="img-responsive" src="https://placehold.it/100x100" id="thumbNail2" />
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
      </div>
    </div>
    <div class="row">
      <h3 class="blogTitle">Blog Title</h3>
    </div>
    <div class="row" id="blogFeed3">
      <div class="col-md-12 hidden-sm hidden-xs">
        <img class="img-responsive" src="https://placehold.it/100x100" id="thumbNail3" />
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
      </div>
    </div>
  </div>
  <div class="row" id="scrollDown">
    <button id="downClick"><i class="fa fa-chevron-circle-down fa-2x"></i>
    </button>
  </div>
</div>

可通过按钮滚动 Div 且无滚动条

Scrollable Div via buttons and no scroll-bar

javascript

jquery

scroll

scrolltop