CODEWITHSUNDEEP
javascripthtmljquerycss
NiceToMytyuk
NiceToMytyuk

Reputation: 4277

Unable to set overflow hidden when there is a div with negative margin on right

I have a page where i have two divs which slide in, one from left and one from right, the div which slides from left to right doesn't give any problem, while the one which slides from right to left make the page overwflow horizontally.

I tought that was an issue of some of container so i tried to set the same div to slide instead from left to right and that works, the issue is only when there is a div with right position and negative right margins.

I have set the overflow: hidden; to html and body and tried with all other childs but nothing...

The page still behave like this:

enter image description here

The page start with normal view but i'm able to scroll horizontally to the div which have to be hidden and which then on a specific event i slide in the view...

The page has simple structure like:

$('.scontrino').css('margin-right', -$('.scontrino').width() - 30);


$('.content').on('click', function() {
  $(".content").addClass("col-sm-8");
  $(".content").removeClass("col-sm-12");
  $('.scontrino').animate({
    marginRight: 0
  }, 300)
})
html,
body {
  height: 100% !important;
  width: 100%;
  color: #001c1f;
    overflow: hidden;
}

.scontrino {
  position: absolute !important;
  right: 0;
  top: 0;
  background-color: rgba(245, 245, 245, 0.945);
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="container-fluid h-100">
  <div class="row h-100">
    <div class="col-sm-12 content">
      CONTENT
    </div>
    <div class="col-sm-4 scontrino">
      SLIDER
    </div>
  </div>
</div>
</body>

But in the example i can't reproduce the horizontal scroll as the overflow: hidden works properly...

EDIT: That happend only on mobile devices when i'm using chrome developer device toolbar

Upvotes: 0

Views: 374

Answers (1)

kunal panchal
kunal panchal

Reputation: 798

You can toggle class name to animate the slider as in the following code which might help you

 
$('.content').on('click', function() {
  $(".content").addClass("col-sm-8");
  $(".content").removeClass("col-sm-12");
  $('.scontrino').addClass("animate-direction");
})
html,
body {
  height: 100% !important;
  width: 100%;
  color: #001c1f;
    overflow: hidden;
}

.scontrino {
  position: absolute !important;
  right: 0;
  top: 0;
  background-color: rgba(245, 245, 245, 0.945);
  transform: translateX(100%);
  transition: ease all 300ms;
}

.animate-direction{
  transform: translateX(0);
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="container-fluid h-100">
  <div class="row h-100">
    <div class="col-sm-12 content">
      CONTENT
    </div>
    <div class="col-sm-4 scontrino">
      SLIDER
    </div>
  </div>
</div>
</body>

Upvotes: 1

Related Questions