Pass scroll not working
NoMaillard opened this issue · comments
scroll pass does not seem to work when you can only drag horizontally, dragging vertically does not scroll the page.
here's a GIF demonstrating that :
please use latest version
@donmbelembe this does not seem to work in 1.10.0.
is use this combo of directives
v-dragscroll.x="true" v-dragscroll.pass
It should be like this v-dragscroll.pass.x
ah yes, but this does no work also, what kind of info would you need to find the issue ?
please can you provide a screenshot so I can reproduce the error
I tried in my environment everything is working as expected, maybe try to reproduce your problem on some online editor so we can solve it
ok i will try, could you upload your test piece to codepen to see if i have something similar or not ?
i have found the issue i think.
the problem is that the scrolling element in my case is not the window, but an element inside of it, so it doesn't scroll.
you can see it replicated here (i used the index.html at the root of vue-dragscroll
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue-dragscroll</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M"
crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style>
.big-box {
width: 300px;
height: 300px;
overflow: scroll;
}
.my-draggable-div-parent {
width: 300px;
height: 500px;
}
.my-draggable-div {
margin: 25px;
width: 250px;
height: 250px;
overflow: scroll;
}
.oh {
overflow: hidden;
}
.small-box {
width: 50px;
height: 50px;
display: inline-block;
}
p.p {
margin: 25px;
white-space: nowrap;
}
.grab-bing {
cursor : -webkit-grab;
cursor : -moz-grab;
cursor : -o-grab;
cursor : grab;
}
.grab-bing:active {
cursor : -webkit-grabbing;
cursor : -moz-grabbing;
cursor : -o-grabbing;
cursor : grabbing;
}
.container {
height: 100vh;
}
.fixed-header {
height: 45px;
}
.row {
height: calc(100vh - 45px);
overflow-y: auto;
}
.scrollable {
height: 1000px;
background-color: blueviolet;
}
</style>
</head>
<body>
<div id="app">
<div class="container">
<div class="fixed-header">HEADER</div>
<div class="row">
<div class="d-flex justify-content-center scrollable">
<div class="big-box grab-bing border border-danger bg-secondary" v-dragscroll.pass.x
v-on:dragscrollstart="eventTrigged('dragscrollstart')" v-on:dragscrollend="eventTrigged('dragscrollend')"
v-on:dragscrollmove="eventTrigged('dragscrollmove', $event)">
<img src="./assets/image.jpg" alt="">
</div>
</div>
</div>
</div>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="./dist/vue-dragscroll.js"></script>
<!-- <script src="https://unpkg.com/vue-dragscroll"></script> -->
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
<script>
new Vue({
el: '#app',
data: {
drag: true,
oh: false
},
methods: {
eventTrigged: function(name, e) {
console.log(name);
if (name == 'dragscrollmove') {
console.log(e.detail)
}
},
testClick: function() {
alert('Clicked')
}
}
})
</script>
</body>
</html>@donmbelembe i added a pull request to be able to add a container option