Question

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

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

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

Answer 1

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

Answer 2

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>

这是您要寻找的吗？

引荐-Scrollbar in one div only

Answer 3

这就是你要找的东西

<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>

Answer 4

您可以使用：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>

考虑browser compatibility很重要。

通过按钮滚动自定义块

4 个答案: