使用純javascript向上/向下滾動

Question

我一直使用jQuery進行動畫製作，但是這一次我無法使用它，所以我需要一些幫助，用香草的javascript來吸引我。

描述： 我有一個有限的高度和垂直滾動div。 在頂部和底部，我有按鈕用於在該div內上下滾動內容。按鈕具有固定的頂部/底部位置。

所以，如果我點擊頂部按鈕，我希望這個div內的內容滑落。 當點擊底部按鈕時，我想讓內容向上滑動。

完美的場景將是如果我按住按鈕上的鼠標按鈕（或手指在觸摸設備上），滾動應該繼續。如果我只點擊一次/點擊，我想有一個選項來設置滾動量（在px中，可能是一個函數中的參數）。

這是我的HTML：

<div id="header"> 
    <input class="uk-button uk-button-primary" id="down" type="button" value="Scroll down"> 
</div> 
<div id="content"> 
    <div id="inner"> 
    <p>Here comes a very long text</p> 
    </div> 
</div> 
<div id="footer"> 
    <input class="uk-button uk-button-primary" id="up" type="button" value="Scroll up"> 
</div> 

我創建了一個例子（沒有的JavaScript）：https://jsfiddle.net/esedic/L0u4a2d0/

Answer 1

檢查此琴：https://jsfiddle.net/9257p50r/2/

var scrollDown,scrollUp; 
 
var contentEle = document.getElementById('content'); 
 
var downBtn = document.getElementById('down'); 
 
var upBtn = document.getElementById('up'); 
 
downBtn.addEventListener("mousedown", function(){ 
 
    scrollDown = setInterval(function(){ 
 
     contentEle.scrollTop += 20; 
 
    },100) 
 
}); 
 
upBtn.addEventListener("mousedown", function(){ 
 
\t scrollUp = setInterval(function(){ 
 
    \t contentEle.scrollTop -= 20; 
 
    },100) 
 
}); 
 

 

 
downBtn.addEventListener("mouseup", function(){ 
 
\t clearInterval(scrollDown); 
 
}); 
 
upBtn.addEventListener("mouseup", function(){ 
 
\t clearInterval(scrollUp); 
 
}); 
 

 

 
/* mobile touch */ 
 
downBtn.addEventListener("touchstart", function(){ 
 
    scrollDown = setInterval(function(){ 
 
     contentEle.scrollTop += 20; 
 
    },100) 
 
}, false); 
 
downBtn.addEventListener("touchend", function(){ 
 
    clearInterval(scrollDown); 
 
}, false); 
 

 
upBtn.addEventListener("touchstart", function(){ 
 
    scrollUp = setInterval(function(){ 
 
     contentEle.scrollTop -= 20; 
 
    },100) 
 
}, false); 
 
upBtn.addEventListener("touchend", function(){ 
 
    clearInterval(scrollUp); 
 
}, false);

body { 
 
    padding: 1em; 
 
    margin-top: 2.5em; 
 
} 
 
#header { 
 
    position: fixed; 
 
    top: 1em; 
 
    left: 1em; 
 
} 
 
#footer { 
 
    position: fixed; 
 
    bottom: 1em; 
 
    left: 1em; 
 
} 
 
#content { 
 
    max-height: 570px; 
 
    overflow: hidden; 
 
    overflow-y: scroll; 
 
    -webkit-overflow-scrolling: touch; 
 
}

<div id="header"> 
 
    <input class="uk-button uk-button-primary" id="down" type="button" value="Scroll down"> 
 
</div> 
 
<div id="content"> 
 
    <div id="inner"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id nunc a diam laoreet porttitor quis id tellus. Nulla facilisi. Nam molestie sapien ac eros sollicitudin volutpat. Duis id malesuada velit. Donec tristique orci quis ante viverra fermentum. In hac habitasse platea dictumst. Donec ut hendrerit enim. In semper enim enim, et dignissim sapien placerat eu. Mauris ac sapien a enim euismod tincidunt in non justo. Vivamus tincidunt placerat mauris, sit amet scelerisque nisl varius nec. Sed commodo pharetra dolor a feugiat. Pellentesque enim risus, condimentum nec nisi a, vehicula feugiat elit. Phasellus vulputate diam eu sagittis suscipit. Curabitur tempor posuere nibh non congue.</p> 
 
    <p>Praesent eget tortor dapibus, scelerisque nisl ut, lobortis neque. Ut vel ex id nibh pretium commodo sed id odio. Mauris vulputate justo id facilisis ornare. Nullam efficitur orci leo. Donec laoreet vehicula justo, sed sollicitudin dolor. Quisque at mattis enim. Quisque at eleifend lorem. Curabitur non ex id mi eleifend sagittis vel quis mauris. Nulla mattis tellus arcu, vitae gravida neque condimentum a. Nulla faucibus pulvinar risus in consectetur. Nunc tristique tincidunt velit, a gravida erat egestas nec. Mauris interdum ultrices risus vel hendrerit. Fusce sed odio erat. Proin ac ornare purus. Donec laoreet luctus maximus.</p> 
 
    <p>Sed id erat ut leo auctor molestie id a lectus. Fusce orci nibh, euismod at risus vitae, laoreet rhoncus purus. Ut hendrerit mollis tempor. Quisque ullamcorper in est dignissim accumsan. Fusce maximus purus porta lorem aliquet pretium. Mauris nec egestas nisl. Proin venenatis sem et arcu imperdiet, at interdum mauris varius. Vestibulum metus justo, euismod ac ipsum quis, blandit venenatis lectus. Sed non vehicula ligula.</p> 
 
    <p>Nunc in lorem egestas, gravida neque a, iaculis massa. Vestibulum porttitor sed nibh eget auctor. Aliquam dictum posuere diam, et elementum justo consequat sed. Morbi eu suscipit quam. Phasellus fringilla non mi ac volutpat. Proin in massa tellus. Curabitur rhoncus ultrices est, vitae mollis purus commodo vitae. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc sagittis felis risus, in dictum nibh tincidunt quis. Curabitur in neque blandit, consequat quam et, pellentesque orci. Vivamus risus sem, finibus convallis diam vel, ornare blandit lacus. Vestibulum molestie purus quis rutrum egestas.</p> 
 
    <p>Sed non mi sed odio dictum feugiat id ac dui. Sed magna justo, molestie vel sapien sed, finibus finibus tortor. Maecenas dapibus nisi justo, id sollicitudin ipsum suscipit aliquam. Pellentesque bibendum dui urna, fermentum sodales urna placerat fringilla. Curabitur et suscipit ligula. Nunc feugiat tortor vel rhoncus rutrum. Integer vitae ex vitae est porttitor semper tincidunt at turpis. Nullam bibendum accumsan maximus. Donec tincidunt sit amet sem non sollicitudin. Sed accumsan, ex vitae consectetur tempor, elit mi scelerisque sem, eu iaculis nunc purus ac diam. Maecenas tempor quam lectus, vitae rutrum velit ultricies eu. Integer maximus turpis a pulvinar maximus. Donec ultrices nulla et malesuada commodo.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id nunc a diam laoreet porttitor quis id tellus. Nulla facilisi. Nam molestie sapien ac eros sollicitudin volutpat. Duis id malesuada velit. Donec tristique orci quis ante viverra fermentum. In hac habitasse platea dictumst. Donec ut hendrerit enim. In semper enim enim, et dignissim sapien placerat eu. Mauris ac sapien a enim euismod tincidunt in non justo. Vivamus tincidunt placerat mauris, sit amet scelerisque nisl varius nec. Sed commodo pharetra dolor a feugiat. Pellentesque enim risus, condimentum nec nisi a, vehicula feugiat elit. Phasellus vulputate diam eu sagittis suscipit. Curabitur tempor posuere nibh non congue.</p> 
 
    <p>Praesent eget tortor dapibus, scelerisque nisl ut, lobortis neque. Ut vel ex id nibh pretium commodo sed id odio. Mauris vulputate justo id facilisis ornare. Nullam efficitur orci leo. Donec laoreet vehicula justo, sed sollicitudin dolor. Quisque at mattis enim. Quisque at eleifend lorem. Curabitur non ex id mi eleifend sagittis vel quis mauris. Nulla mattis tellus arcu, vitae gravida neque condimentum a. Nulla faucibus pulvinar risus in consectetur. Nunc tristique tincidunt velit, a gravida erat egestas nec. Mauris interdum ultrices risus vel hendrerit. Fusce sed odio erat. Proin ac ornare purus. Donec laoreet luctus maximus.</p> 
 
    <p>Sed id erat ut leo auctor molestie id a lectus. Fusce orci nibh, euismod at risus vitae, laoreet rhoncus purus. Ut hendrerit mollis tempor. Quisque ullamcorper in est dignissim accumsan. Fusce maximus purus porta lorem aliquet pretium. Mauris nec egestas nisl. Proin venenatis sem et arcu imperdiet, at interdum mauris varius. Vestibulum metus justo, euismod ac ipsum quis, blandit venenatis lectus. Sed non vehicula ligula.</p> 
 
    <p>Nunc in lorem egestas, gravida neque a, iaculis massa. Vestibulum porttitor sed nibh eget auctor. Aliquam dictum posuere diam, et elementum justo consequat sed. Morbi eu suscipit quam. Phasellus fringilla non mi ac volutpat. Proin in massa tellus. Curabitur rhoncus ultrices est, vitae mollis purus commodo vitae. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc sagittis felis risus, in dictum nibh tincidunt quis. Curabitur in neque blandit, consequat quam et, pellentesque orci. Vivamus risus sem, finibus convallis diam vel, ornare blandit lacus. Vestibulum molestie purus quis rutrum egestas.</p> 
 
    <p>Sed non mi sed odio dictum feugiat id ac dui. Sed magna justo, molestie vel sapien sed, finibus finibus tortor. Maecenas dapibus nisi justo, id sollicitudin ipsum suscipit aliquam. Pellentesque bibendum dui urna, fermentum sodales urna placerat fringilla. Curabitur et suscipit ligula. Nunc feugiat tortor vel rhoncus rutrum. Integer vitae ex vitae est porttitor semper tincidunt at turpis. Nullam bibendum accumsan maximus. Donec tincidunt sit amet sem non sollicitudin. Sed accumsan, ex vitae consectetur tempor, elit mi scelerisque sem, eu iaculis nunc purus ac diam. Maecenas tempor quam lectus, vitae rutrum velit ultricies eu. Integer maximus turpis a pulvinar maximus. Donec ultrices nulla et malesuada commodo.</p> 
 
    </div> 
 
</div> 
 
<div id="footer"> 
 
    <input class="uk-button uk-button-primary" id="up" type="button" value="Scroll up"> 
 
</div>

Answer 2

使用jQuery：

var scrolled = 0; 

$(document).ready(function() { 
    $("#downClick").on("click" ,function() { 
     scrolled = scrolled + 900; 

     $(".cover").animate({ 
         scrollTop: scrolled 
        }); 
    }); 

    $("#upClick").on("click" ,function() { 
     scrolled = scrolled - 300; 

     $(".cover").animate({ 
         scrollTop: scrolled 
        }); 
    }); 

    $(".clearValue").on("click" ,function() { 
     scrolled = 0; 
    }); 
}); 

http://jsfiddle.net/xEFq5/10/

Answer 3

使用的addEventListener

var down = document.querySelector("#down"), 
 
\t \t up = document.querySelector("#up"), 
 
    content = document.querySelector("#content"); 
 
    
 
    function scrollDown(){content.scrollTop = content.scrollHeight} 
 
    function scrollUp(){content.scrollTop = 0} 
 
    down.addEventListener("click",scrollDown,false); 
 
    up.addEventListener("click",scrollUp,false);

body { 
 
    padding: 1em; 
 
    margin-top: 2.5em; 
 
} 
 
#header { 
 
    position: fixed; 
 
    top: 1em; 
 
    left: 1em; 
 
} 
 
#footer { 
 
    position: fixed; 
 
    bottom: 1em; 
 
    left: 1em; 
 
} 
 
#content { 
 
    max-height: 570px; 
 
    overflow: hidden; 
 
    overflow-y: scroll; 
 
    -webkit-overflow-scrolling: touch; 
 
} 
 
#inner { 
 

 
}

<div id="header"> 
 
    <input class="uk-button uk-button-primary" id="down" type="button" value="Scroll down"> 
 
</div> 
 
<div id="content"> 
 
    <div id="inner"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id nunc a diam laoreet porttitor quis id tellus. Nulla facilisi. Nam molestie sapien ac eros sollicitudin volutpat. Duis id malesuada velit. Donec tristique orci quis ante viverra fermentum. In hac habitasse platea dictumst. Donec ut hendrerit enim. In semper enim enim, et dignissim sapien placerat eu. Mauris ac sapien a enim euismod tincidunt in non justo. Vivamus tincidunt placerat mauris, sit amet scelerisque nisl varius nec. Sed commodo pharetra dolor a feugiat. Pellentesque enim risus, condimentum nec nisi a, vehicula feugiat elit. Phasellus vulputate diam eu sagittis suscipit. Curabitur tempor posuere nibh non congue.</p> 
 
    <p>Praesent eget tortor dapibus, scelerisque nisl ut, lobortis neque. Ut vel ex id nibh pretium commodo sed id odio. Mauris vulputate justo id facilisis ornare. Nullam efficitur orci leo. Donec laoreet vehicula justo, sed sollicitudin dolor. Quisque at mattis enim. Quisque at eleifend lorem. Curabitur non ex id mi eleifend sagittis vel quis mauris. Nulla mattis tellus arcu, vitae gravida neque condimentum a. Nulla faucibus pulvinar risus in consectetur. Nunc tristique tincidunt velit, a gravida erat egestas nec. Mauris interdum ultrices risus vel hendrerit. Fusce sed odio erat. Proin ac ornare purus. Donec laoreet luctus maximus.</p> 
 
    <p>Sed id erat ut leo auctor molestie id a lectus. Fusce orci nibh, euismod at risus vitae, laoreet rhoncus purus. Ut hendrerit mollis tempor. Quisque ullamcorper in est dignissim accumsan. Fusce maximus purus porta lorem aliquet pretium. Mauris nec egestas nisl. Proin venenatis sem et arcu imperdiet, at interdum mauris varius. Vestibulum metus justo, euismod ac ipsum quis, blandit venenatis lectus. Sed non vehicula ligula.</p> 
 
    <p>Nunc in lorem egestas, gravida neque a, iaculis massa. Vestibulum porttitor sed nibh eget auctor. Aliquam dictum posuere diam, et elementum justo consequat sed. Morbi eu suscipit quam. Phasellus fringilla non mi ac volutpat. Proin in massa tellus. Curabitur rhoncus ultrices est, vitae mollis purus commodo vitae. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc sagittis felis risus, in dictum nibh tincidunt quis. Curabitur in neque blandit, consequat quam et, pellentesque orci. Vivamus risus sem, finibus convallis diam vel, ornare blandit lacus. Vestibulum molestie purus quis rutrum egestas.</p> 
 
    <p>Sed non mi sed odio dictum feugiat id ac dui. Sed magna justo, molestie vel sapien sed, finibus finibus tortor. Maecenas dapibus nisi justo, id sollicitudin ipsum suscipit aliquam. Pellentesque bibendum dui urna, fermentum sodales urna placerat fringilla. Curabitur et suscipit ligula. Nunc feugiat tortor vel rhoncus rutrum. Integer vitae ex vitae est porttitor semper tincidunt at turpis. Nullam bibendum accumsan maximus. Donec tincidunt sit amet sem non sollicitudin. Sed accumsan, ex vitae consectetur tempor, elit mi scelerisque sem, eu iaculis nunc purus ac diam. Maecenas tempor quam lectus, vitae rutrum velit ultricies eu. Integer maximus turpis a pulvinar maximus. Donec ultrices nulla et malesuada commodo.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id nunc a diam laoreet porttitor quis id tellus. Nulla facilisi. Nam molestie sapien ac eros sollicitudin volutpat. Duis id malesuada velit. Donec tristique orci quis ante viverra fermentum. In hac habitasse platea dictumst. Donec ut hendrerit enim. In semper enim enim, et dignissim sapien placerat eu. Mauris ac sapien a enim euismod tincidunt in non justo. Vivamus tincidunt placerat mauris, sit amet scelerisque nisl varius nec. Sed commodo pharetra dolor a feugiat. Pellentesque enim risus, condimentum nec nisi a, vehicula feugiat elit. Phasellus vulputate diam eu sagittis suscipit. Curabitur tempor posuere nibh non congue.</p> 
 
    <p>Praesent eget tortor dapibus, scelerisque nisl ut, lobortis neque. Ut vel ex id nibh pretium commodo sed id odio. Mauris vulputate justo id facilisis ornare. Nullam efficitur orci leo. Donec laoreet vehicula justo, sed sollicitudin dolor. Quisque at mattis enim. Quisque at eleifend lorem. Curabitur non ex id mi eleifend sagittis vel quis mauris. Nulla mattis tellus arcu, vitae gravida neque condimentum a. Nulla faucibus pulvinar risus in consectetur. Nunc tristique tincidunt velit, a gravida erat egestas nec. Mauris interdum ultrices risus vel hendrerit. Fusce sed odio erat. Proin ac ornare purus. Donec laoreet luctus maximus.</p> 
 
    <p>Sed id erat ut leo auctor molestie id a lectus. Fusce orci nibh, euismod at risus vitae, laoreet rhoncus purus. Ut hendrerit mollis tempor. Quisque ullamcorper in est dignissim accumsan. Fusce maximus purus porta lorem aliquet pretium. Mauris nec egestas nisl. Proin venenatis sem et arcu imperdiet, at interdum mauris varius. Vestibulum metus justo, euismod ac ipsum quis, blandit venenatis lectus. Sed non vehicula ligula.</p> 
 
    <p>Nunc in lorem egestas, gravida neque a, iaculis massa. Vestibulum porttitor sed nibh eget auctor. Aliquam dictum posuere diam, et elementum justo consequat sed. Morbi eu suscipit quam. Phasellus fringilla non mi ac volutpat. Proin in massa tellus. Curabitur rhoncus ultrices est, vitae mollis purus commodo vitae. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc sagittis felis risus, in dictum nibh tincidunt quis. Curabitur in neque blandit, consequat quam et, pellentesque orci. Vivamus risus sem, finibus convallis diam vel, ornare blandit lacus. Vestibulum molestie purus quis rutrum egestas.</p> 
 
    <p>Sed non mi sed odio dictum feugiat id ac dui. Sed magna justo, molestie vel sapien sed, finibus finibus tortor. Maecenas dapibus nisi justo, id sollicitudin ipsum suscipit aliquam. Pellentesque bibendum dui urna, fermentum sodales urna placerat fringilla. Curabitur et suscipit ligula. Nunc feugiat tortor vel rhoncus rutrum. Integer vitae ex vitae est porttitor semper tincidunt at turpis. Nullam bibendum accumsan maximus. Donec tincidunt sit amet sem non sollicitudin. Sed accumsan, ex vitae consectetur tempor, elit mi scelerisque sem, eu iaculis nunc purus ac diam. Maecenas tempor quam lectus, vitae rutrum velit ultricies eu. Integer maximus turpis a pulvinar maximus. Donec ultrices nulla et malesuada commodo.</p> 
 
    </div> 
 
</div> 
 
<div id="footer"> 
 
    <input class="uk-button uk-button-primary" id="up" type="button" value="Scroll up"> 
 
</div>