donmbelembe/vue-dragscroll

Pass scroll not working

NoMaillard opened this issue · 11 comments

NoMaillard commented

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 :
2018-12-05 12 50 41

donmbelembe commented

please use latest version

NoMaillard commented

@donmbelembe this does not seem to work in 1.10.0.

is use this combo of directives

 v-dragscroll.x="true" v-dragscroll.pass
donmbelembe commented

It should be like this v-dragscroll.pass.x

NoMaillard commented

ah yes, but this does no work also, what kind of info would you need to find the issue ?

donmbelembe commented

please can you provide a screenshot so I can reproduce the error

NoMaillard commented
donmbelembe commented

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

NoMaillard commented

ok i will try, could you upload your test piece to codepen to see if i have something similar or not ?

NoMaillard commented

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.

NoMaillard commented

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>
NoMaillard commented

@donmbelembe i added a pull request to be able to add a container option