CODEWITHSUNDEEP
javascriptjqueryhtmlcsshammer.js
alphadmon
alphadmon

Reputation: 426

Hammer.js on tap is stoppng parent div from scrolling

I am currently using Hammer.JS to create a desktop and mobile friendly user interface.

The following is the CSS for a parent div that has smaller divs in it populated by JS. 

.attributescroll {
  float: left;
  width: 100%;
  height: 100px;
  background: #1A1A1A;
  overflow: hidden;
  overflow-x: auto;
  white-space: nowrap;
  cursor: pointer;
}

It is populated by several child elements as ".attribute"

For each of them, I have a tap event tied which set text elsewhere in the text (for now). But in doing so I now cannot scroll the parent div.

$('.attribute').each(function() {
  var selectedAttribute = new Hammer(this);
  selectedAttribute.on("tap", function(event) {
    if ($(".mobiletopicwrap").css("display") == "block") {
      $(".mtopmytopic").html($(event.target).html());
    } else {
      $(".topmytopic").html($(event.target).html());
    }
  });
});

I have tried setting touch-action but to no avail. Any guidance would be much appreciated.

Upvotes: 0

Views: 346

Answers (1)

Hao Yellow
Hao Yellow

Reputation: 83

Couldn't reproduce your situation. Based on your code, I wrote this code snippet below. Hope you can reproduce your issue in a similar way hence I could provide further help with it.

$('.attribute').each(function() {
  var selectedAttribute = new Hammer(this);
  selectedAttribute.on("tap", function(event) {
    if ($(".mobiletopicwrap").css("display") == "block") {
      $(".mtopmytopic").html($(event.target).html());
    } else {
      $(".topmytopic").html($(event.target).html());
    }
  });
});  
.attributescroll {
  float: left;
  width: 100%;
  height: 100px;
  background: #1A1A1A;
  overflow: hidden;
  overflow-x: auto;
  white-space: nowrap;
  cursor: pointer;
}
.attribute {
  width: 100px;
  background: darkred;
  height: 80px;
  display: inline-block;
  margin-top: 10px;
}
.parent {
  width: 500px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js"></script>

<div class="attributescroll">
  <div class="attribute"></div>
  <div class="attribute"></div>
  <div class="attribute"></div>
  <div class="attribute"></div>
  <div class="attribute"></div>
  <div class="attribute"></div>
  <div class="attribute"></div>
  <div class="attribute"></div>
  <div class="attribute"></div>
  <div class="attribute"></div>
  <div class="attribute"></div>
  <div class="attribute"></div>
  <div class="attribute"></div>
  <div class="attribute"></div>
  <div class="attribute"></div>
  <div class="attribute"></div>
  <div class="attribute"></div>
  <div class="attribute"></div>
  <div class="attribute"></div>
</div>

Upvotes: 1

Related Questions