During the development of a project, I wanted to incorporate an effect into my webpage. To achieve this, I positioned elements off the screen. However, upon running the code, the window resized with scrollbars, causing inconvenience for mobile users
Below is the code snippet where I placed an element off the screen for the desired effect.
<!--html-->
<div class="full-view cont" id="desc">
<h1>What is IoT?</h1>
<br /><br /><br /><br />
<section>
<div class="half-view">
<img src="https://www.webyot.com/assets/site/img/iot.png" alt="" class="half-img"/>
</div>
<div class="half-view">
<p class="p">
The internet of things, or IoT, is a system of interrelated computing devices, mechanical and digital machines, objects, animals or people that are provided with unique identifiers (UIDs) and the ability to transfer data over a network without requiring human-to-human or human-to-computer interaction.
</p>
</div>
</section>
</div>
Additionally, the JavaScript code used for hiding these divs without resizing the window is shown below:
//js
$(".cont:nth-child(even)").animate({left:"-100%"},1);
If anyone has a solution on how to prevent the window from resizing and displaying untidy scroll bars when trying to hide these divs, please share your insights.
For reference, here is the complete code example: