Skip to content

Instantly share code, notes, and snippets.

@kuntau

kuntau/index.html

Last active Apr 14, 2020
Embed
What would you like to do?
Vue horizontal scroller -- https://codepen.io/kuntau/full/XWmJezP
<div id="card" class="card-header bg-gray-200 border rounded shadow-md relative flex">
<button id="left" @click="left" class="p-4 hover:bg-gray-300 border"><i class="fas fa-chevron-left"></i></button>
<div id="wrapper" ref="wrapper" class="wrapper whitespace-no-wrap flex-auto flex overflow-x-hidden w-full">
<a class="inner px-4 py-4 border-r text-gray-700 bg-gray-300 shadow-inner" href="#"><i class="fas fa-star"></i> Favorite</a>
<a class="inner px-4 py-4 hover:bg-gray-300 border-r" href="#"><i class="fas fa-utensils"></i> Foods</a>
<a class="inner px-4 py-4 hover:bg-gray-300 border-r" href="#"><i class="fas fa-beer"></i> Cold drinks</a>
<a class="inner px-4 py-4 hover:bg-gray-300 border-r" href="#"><i class="fas fa-coffee"></i> Hot drinks</a>
<a class="inner px-4 py-4 hover:bg-gray-300 border-r" href="#"><i class="fas fa-search"></i> Search</a>
<a class="inner px-4 py-4 hover:bg-gray-300 border-r" href="#"><i class="fas fa-utensils"></i> F{{ position }}</a>
<a class="inner px-4 py-4 hover:bg-gray-300 border-r" href="#"><i class="fas fa-beer"></i> Cold drinks</a>
<a class="inner px-4 py-4 hover:bg-gray-300 border-r" href="#"><i class="fas fa-coffee"></i> Hot drinks</a>
<a class="inner px-4 py-4 hover:bg-gray-300 border-r" href="#"><i class="fas fa-search"></i> Search</a>
<a class="inner px-4 py-4 hover:bg-gray-300 border-r" href="#"><i class="fas fa-utensils"></i> Foods</a>
<a class="inner px-4 py-4 hover:bg-gray-300 border-r" href="#"><i class="fas fa-beer"></i> Cold drinks</a>
<a class="inner px-4 py-4 hover:bg-gray-300 border-r" href="#"><i class="fas fa-coffee"></i> Hot drinks</a>
<a class="inner px-4 py-4 hover:bg-gray-300 border-r" href="#"><i class="fas fa-search"></i> Search</a>
</div>
<button id="right" @click="right" class="p-4 hover:bg-gray-300 border"><i class="fas fa-chevron-right"></i></button>
</div>
// inspired by https://forum.vuejs.org/t/horizontal-scroll-using-buttons-in-vuejs/38089
new Vue({
el: '#card',
data: {
step: 200, // scroll step in pixels
dura: 400, // animation duration in miliseconds
position: 0 // element scrollLeft starting position
},
methods: {
left: function() {
const wrapper = this.$refs.wrapper;
this.scrollTo(wrapper, -this.step, this.dura);
},
right: function() {
const wrapper = this.$refs.wrapper;
this.scrollTo(wrapper, this.step, this.dura);
},
scrollTo: function(elm, step, duration) {
const scrollPos = elm.scrollLeft;
this.position = elm.scrollLeft;
// Condition to check if scrolling is required
if ( !( (scrollPos === 0 || step > 0)
&& (elm.clientWidth + scrollPos === elm.scrollWidth
|| step < 0)))
{
let start;
const scroll = function(timestamp) {
if (!start) start = timestamp;
const progress = timestamp - start;
elm.scrollLeft = scrollPos + step * (progress/duration); //Set the scrolleft
if (progress < duration) {
window.requestAnimationFrame(scroll);
}
return;
}
window.requestAnimationFrame(scroll);
}
},
}
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment