javascript - 通过按钮滚动自定义块

Question

我想创建一个可以上下滚动的 div 块。但我被卡住了。

 <script>
    function scrollWin() {
      window.scrollBy(0, 100);
    }
    </script>

但是，此代码滚动整个页面，而不仅仅是一个 div 块。此外，我陷入了我可以指定向上和向下滚动最多三次的方式以及在什么位置（否则：-300px、-400px 和 -500px 上下滚动 - 一个接一个）。

score 0 · Accepted Answer

body{
    background-color:#8cbfcf;
    margin: 0px 0px 0px 0px;
    overflow:hidden;
    }
#header{
    height: 60px;
    background-color:#70b0c3;
    position:fixed;
    box-shadow:#19343d 0px 1px 2px;
    width:100%;
    margin-left:0px;
    z-index:999;
    }
#accountinfo{
    position: absolute;
    right:10px;
    top: 0px;
    font-family: Happy Monkey, sans-serif;
    color:#EFF;
    text-shadow:#000 1px 1px 1px;
    font-size:18px;
    line-height: 60px;
    }
#blank{
     height:60px;
     width:100%;
    }
#main{
    height: 1500px;
    width:580px;
    margin-left:auto;
    margin-top:20px;
    background-color:#70b0c3;
    box-shadow: #254C58 1px 0px;
    border: #3C7D91 1px double;
    border-bottom:0px;
    opacity:0.9;
    padding:10px 10px 10px 10px;
    overflow-y: scroll;
    max-height: 400px;
    }
#leftside{
    top: 80px;
    left: 160px;
    float: left;
    height: auto;
    width: 230px;
    background-color: #70B0C3;
    opacity: 0.9;
    border: #3C7D91 1px double;
    position:fixed;
    box-shadow: #254C58 1px 1px;
    border-radius: 5px 5px 5px 5px;
    }
#rightside{
    position:fixed;
    top:80px;
    right:160px;
    height:300px;
    width:230px;
    opacity: 0.9;
    background-color: #70B0C3;
    border: #3C7D91 1px double;
    box-shadow: #254C58 1px 1px;
    border-radius: 5px 5px 5px 5px;
    }

<body>
<div id="header">
    <div id="title">Your Feedback</div>
</div>
<div id="blank"></div>
<div id="main" style="margin-right: auto; ">
    <h1>TITLE</h1>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
<h2>SOME TEXT</h2>
</div>
        
<div id="footer">
    BLABLA
</div>

这是你想要的？

参考 -仅在一个 div 中的滚动条

score 0 · Accepted Answer

这是你在找什么

<html>

<style>
.scroll{
	width:300px;
	height:200px;
	background:red;
	overflow: scroll;
}
</style>

<div class="scroll">
However, this code scrolls the whole page and not just one div block. Also, I got stuck in the way I could specify to scroll up and down up to three times and in what positions (otherwise: -300px, -400px and -500px up and down - one after the other).
However, this code scrolls the whole page and not just one div block. Also, I got stuck in the way I could specify to scroll up and down up to three times and in what positions (otherwise: -300px, -400px and -500px up and down - one after the other).
However, this code scrolls the whole page and not just one div block. Also, I got stuck in the way I could specify to scroll up and down up to three times and in what positions (otherwise: -300px, -400px and -500px up and down - one after the other).
However, this code scrolls the whole page and not just one div block. Also, I got stuck in the way I could specify to scroll up and down up to three times and in what positions (otherwise: -300px, -400px and -500px up and down - one after the other).
However, this code scrolls the whole page and not just one div block. Also, I got stuck in the way I could specify to scroll up and down up to three times and in what positions (otherwise: -300px, -400px and -500px up and down - one after the other).
However, this code scrolls the whole page and not just one div block. Also, I got stuck in the way I could specify to scroll up and down up to three times and in what positions (otherwise: -300px, -400px and -500px up and down - one after the other).
However, this code scrolls the whole page and not just one div block. Also, I got stuck in the way I could specify to scroll up and down up to three times and in what positions (otherwise: -300px, -400px and -500px up and down - one after the other).
However, this code scrolls the whole page and not just one div block. Also, I got stuck in the way I could specify to scroll up and down up to three times and in what positions (otherwise: -300px, -400px and -500px up and down - one after the other).
However, this code scrolls the whole page and not just one div block. Also, I got stuck in the way I could specify to scroll up and down up to three times and in what positions (otherwise: -300px, -400px and -500px up and down - one after the other).
However, this code scrolls the whole page and not just one div block. Also, I got stuck in the way I could specify to scroll up and down up to three times and in what positions (otherwise: -300px, -400px and -500px up and down - one after the other).
However, this code scrolls the whole page and not just one div block. Also, I got stuck in the way I could specify to scroll up and down up to three times and in what positions (otherwise: -300px, -400px and -500px up and down - one after the other).
However, this code scrolls the whole page and not just one div block. Also, I got stuck in the way I could specify to scroll up and down up to three times and in what positions (otherwise: -300px, -400px and -500px up and down - one after the other).However, this code scrolls the whole page and not just one div block. Also, I got stuck in the way I could specify to scroll up and down up to three times and in what positions (otherwise: -300px, -400px and -500px up and down - one after the other).
However, this code scrolls the whole page and not just one div block. Also, I got stuck in the way I could specify to scroll up and down up to three times and in what positions (otherwise: -300px, -400px and -500px up and down - one after the other).However, this code scrolls the whole page and not just one div block. Also, I got stuck in the way I could specify to scroll up and down up to three times and in what positions (otherwise: -300px, -400px and -500px up and down - one after the other).
However, this code scrolls the whole page and not just one div block. Also, I got stuck in the way I could specify to scroll up and down up to three times and in what positions (otherwise: -300px, -400px and -500px up and down - one after the other).
However, this code scrolls the whole page and not just one div block. Also, I got stuck in the way I could specify to scroll up and down up to three times and in what positions (otherwise: -300px, -400px and -500px up and down - one after the other).
However, this code scrolls the whole page and not just one div block. Also, I got stuck in the way I could specify to scroll up and down up to three times and in what positions (otherwise: -300px, -400px and -500px up and down - one after the other).
However, this code scrolls the whole page and not just one div block. Also, I got stuck in the way I could specify to scroll up and down up to three times and in what positions (otherwise: -300px, -400px and -500px up and down - one after the other).However, this code scrolls the whole page and not just one div block. Also, I got stuck in the way I could specify to scroll up and down up to three times and in what positions (otherwise: -300px, -400px and -500px up and down - one after the other).However, this code scrolls the whole page and not just one div block. Also, I got stuck in the way I could specify to scroll up and down up to three times and in what positions (otherwise: -300px, -400px and -500px up and down - one after the other).
</div>
</html>

score 0 · Accepted Answer

你可以使用：Element.scrollIntoView().

例子：

Element.scrollIntoView({
  behavior: "smooth",
  block: "center",
  inline: "center"
});

我做了一个演示。

(function() {
  var btnFirstSection = document.getElementById("btnFirstSection"),
    btnSecondSection = document.getElementById("btnSecondSection");

  btnFirstSection.onclick = btnSecondSection.onclick = function() {
    var target = this.dataset.target;
    document.getElementById(target).scrollIntoView({
      behavior: "smooth",
      block: "center",
      inline: "center"
    });
  };
}());

.buttons,
#scrollDiv,
#scrollDiv p {
  margin: 5px;
  padding: 5px;
}

.buttons {
  background-color: #b2bbc8;
}

.buttons button {
  cursor: pointer;
}

#scrollDiv {
  height: 200px;
  overflow: auto;
}

#scrollDiv,
#scrollDiv p {
  border: #b2bbc8 solid 1px;
}

<div class="buttons">
  <button id="btnFirstSection" data-target="first" type="button">First Section</button>
  <button id="btnSecondSection" data-target="second" type="button">Second Section</button>
</div>
<div id="scrollDiv">
  <div id="first">
    <h1>First Section</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>

  <div id="second">
    <h1>Second Section</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
</div>

考虑浏览器的兼容性很重要。

score -1 · Accepted Answer

确保元素可滚动并且您的函数滚动整个页面，因为您使用的是 window.scroll() 而不是 yourDiv.scroll()

javascript - 通过按钮滚动自定义块

4 回答 4

Related

Reference