Прокрутка вверх/вниз с чистым javascript

Question

Я всегда использовал jQuery для анимаций, но на этот раз я не могу его использовать, поэтому мне нужна помощь с javascript с помощью vanilla, где я сосать.

Описание: У меня есть 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>