You can resolve by checking if the scroll appears when the div is displayed. The problem is that there is no way to know if the scroll appears before the div is displayed in the toggle. For this you need to temporarily display the div to detect the scroll, but you can remove the display: none and put visibility: hidden so that it is not visible. If the scroll has been detected, make a recoil with left scroll size + 10px (-scrolDiff-10 +"px". That one 10 you can increase if you want to move more away from the right edge) and apply the display: none again with .hide() and restores the property visibility:
$('.case .show-opt').on('click', function(){
var el = $('.'+$(this).attr('data-type')+$(this).attr('data-number'));
// só se a div estiver oculta
if(!el.is(":visible")){
el.css("visibility", "hidden").show();
// verifica se o scroll foi ativado
var scrolDiff = $("html").get(0).scrollWidth - $("html").width();
el.css({
"left": scrolDiff > 0 ? -scrolDiff-10 +"px" : "0",
"visibility": "visible"
}).hide();
}
el.toggle("slow", function(){
if(!el.is(":visible")) el.css("left", "0");
});
});
I will put 2 examples below simulating that the div#mobile is the area of the device, being the first without the code appearing scroll, the second with the code, eliminating scroll (but do not copy the code of the examples. Copy the answer start code):
Example 1 (normal)
$('.case .show-opt').on('click', function(){
var el = $('.'+$(this).attr('data-type')+$(this).attr('data-number'));
el.toggle("slow");
});
.case {
position: relative;
display: inline-block;
color: #222;
height: 0px;
width: calc(20% - 9px);
padding-bottom: 18%;
background: #f2f2f2;
box-shadow: 2px 1px 6px rgba(0, 0, 0, 0.15);
margin: 4.5px;
}
.opt-item.t-file {
height: 290px;
}
.opt-item {
position: absolute;
width: 200px;
margin: 47px 10px 10px 10px;
background: #f2f2f2;
box-shadow: 2px 1px 6px rgba(0, 0, 0, 0.3);
padding: 8px;
z-index: 1;
display: none;
}
#mobile{
width: 220px;
overflow: auto;
height: 250px;
border: 2px solid #ddd;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="mobile">
<div class="case">
<div class="botoes">
<button data-type="opfi" data-number="4" class="show-opt ion-android-more-vertical">Abrir</button>
</div>
<div class="opt-item t-file opfi4" style="display: none;"></div>
</div>
</div>
Example 2 (without horizontal scroll)
$('.case .show-opt').on('click', function(){
var el = $('.'+$(this).attr('data-type')+$(this).attr('data-number'));
if(!el.is(":visible")){
el.css("visibility", "hidden").show();
var scrolDiff = $("#mobile").get(0).scrollWidth - $("#mobile").width();
el.css({
"left": scrolDiff > 0 ? -scrolDiff-10 +"px" : "0",
"visibility": "visible"
}).hide();
}
el.toggle("slow", function(){
if(!el.is(":visible")) el.css("left", "0");
});
});
.case {
position: relative;
display: inline-block;
color: #222;
height: 0px;
width: calc(20% - 9px);
padding-bottom: 18%;
background: #f2f2f2;
box-shadow: 2px 1px 6px rgba(0, 0, 0, 0.15);
margin: 4.5px;
}
.opt-item.t-file {
height: 290px;
}
.opt-item {
position: absolute;
width: 200px;
margin: 47px 10px 10px 10px;
background: #f2f2f2;
box-shadow: 2px 1px 6px rgba(0, 0, 0, 0.3);
padding: 8px;
z-index: 1;
display: none;
}
#mobile{
width: 220px;
overflow: auto;
height: 250px;
border: 2px solid #ddd;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="mobile">
<div class="case">
<div class="botoes">
<button data-type="opfi" data-number="4" class="show-opt ion-android-more-vertical">Abrir</button>
</div>
<div class="opt-item t-file opfi4" style="display: none;"></div>
</div>
</div>
What’s the matter?
– Sam
The margin is making the page scroll appear below because of the div. opt-item, would like a script that aligns it more to the left to take the scroll below
– João Victor