Невозможно установить скрытое переполнение при наличии div с отрицательным полем справа

#javascript #html #jquery #css

#javascript #HTML #jquery #css

Вопрос:

У меня есть страница, на которой у меня есть два div, которые вставляются, один слева и один справа, div, который скользит слева направо, не создает никаких проблем, в то время как тот, который скользит справа налево, приводит к переполнению страницы по горизонтали.

Я думал, что это была проблема с некоторыми контейнерами, поэтому я попытался установить тот же div для перемещения слева направо, и это работает, проблема возникает только тогда, когда есть div с правильным положением и отрицательными правыми полями.

Я установил overflow: hidden; для html и body и попробовал со всеми другими дочерними элементами, но ничего…

Страница по-прежнему ведет себя так:

Страница начинается с обычного просмотра, но я могу прокручивать по горизонтали до div, который должен быть скрыт и который затем при определенном событии я перемещаю в представлении…

Страница имеет простую структуру, например:

 $('.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/bootstrap@4.6.0/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>

Развернуть фрагмент

Но в примере я не могу воспроизвести горизонтальную прокрутку, поскольку overflow: hidden работает правильно…

РЕДАКТИРОВАТЬ: это происходит только на мобильных устройствах, когда я использую панель инструментов Chrome developer device

1. вместо margin-right этого попробуйте transform:translate свойство css.

2. @kunalpanchal только что попробовал и столкнулся с той же проблемой .. страница становится прокручиваемой по горизонтали и вертикали

Ответ №1:

Вы можете переключить имя класса, чтобы анимировать ползунок, как в следующем коде, который может вам помочь

  
$('.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/bootstrap@4.6.0/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>

Развернуть фрагмент

1. это намного лучше, чем использовать поля, но у меня все еще проблема с прокруткой, НО я заметил, что у меня эта проблема возникает ТОЛЬКО при использовании панели инструментов устройства (имитация мобильного устройства с помощью инструментов разработчика Google Chrome)