通過按鈕滾動自定義塊
[英]Scrolling custom blocks via buttons
問題描述
我想創建一個可以上下滾動的 div 塊。 但我被卡住了。
<script>
function scrollWin() {
window.scrollBy(0, 100);
}
</script>
但是，此代碼滾動整個頁面，而不僅僅是一個 div 塊。 此外，我被困在我可以指定向上和向下滾動三遍以及在什么位置（否則：-300px、-400px 和 -500px 上下滾動 - 一個接一個）的方式。
4 個解決方案
解決方案1
0 2019-01-17 16:03:31
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 中
解決方案2
0 2019-01-17 16:05:59
這是你要找的嗎
<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>
解決方案3
0 已采納 2019-01-17 16:43:06
您可以使用： 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>
考慮瀏覽器兼容性很重要。
解決方案4
-1 2019-01-17 15:57:47
確保元素可滾動並且您的函數滾動整個頁面，因為您使用 window.scroll() 而不是 yourDiv.scroll()
通過javascript訪問瀏覽器歷史記錄以實現自定義后退和前進按鈕
[英]accessing browser history via javascript to implement custom back and forward buttons
jQuery通過向上/向下按鈕滾動到下一個元素-如何為手動滾動添加處理方式，否則會造成混淆？
[英]jQuery scroll to next element via up/down buttons - how to add handling for manual scrolling that would otherwise confuse this?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.