Stop div from causing the scroll bar to expand

Check out this example: https://jsfiddle.net/atg5m6ym/5079/

In the example, you can see that in order to view the message "Hello!" you need to scroll down. Additionally, there is an animation applied to a div which moves it down below the screen:

$("div").animate({top: '3000px'}, 6000);

Observe how the scrollbar changes as a result, making the page much longer.

What I want to achieve is for users to be able to scroll down to see the "Hello!" text if it's not visible on their screen. However, I do not want the div itself to affect the vertical scrollbar when it reaches the bottom of the screen. Instead, I would like the div to continue moving beyond the screen without impacting the scrollbar. Essentially, the scrollbar should not follow the movement of the div.

If I were to use "overflow-y: hidden" it would prevent users from scrolling downward freely to read the "Hello!" Is there any way to achieve both effects using JS (preferably jQuery) or CSS?

EDIT: It's important to note that I still want the div to remain visible, so fading it out is not an option. Even if the div goes off-screen and then returns or moves in an elliptical pattern, I would like it to reappear without affecting the scrollbar.

Answer №1

This code snippet allows the div element to move to the same Y position as the paragraph before fading out:

$(document).ready(function() {
    var p_pos = $("p").offset().top;
    $("div").animate({top: p_pos}, 6000).fadeOut();
});

Here is another example to test:

<div id="everything">
  <div id="orb"></div>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <br>
  <p>
  Hello!
  </p>
</div>

In your CSS, include the following styles:

#everything {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 800px;
  max-height: 800px;
  overflow-y: hidden;
  background-color: #ccc;
}

Remember to animate $("#orb") instead of $("div") and update its name in the CSS as well.

Answer №2

Here is the solution for you. Simply insert this code into the body of your document and adjust the div position accordingly:

body {
overflow: hidden;
}
div {
bottom: 0;
}
https://jsfiddle.net/atg5m6ym/5082/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can you tell me what is creating the space between the elements in this form?

For an example, take a look at this link: I am puzzled by the gap between the form-group and the button, as well as between the different form-groups. When using Bootstrap 4 with flexbox activated, all my elements (inputs and buttons) collapse without any ...

Create a sleek and sharp design for the menu and buttons

How can I replicate this menu design using CSS? https://i.sstatic.net/bpB9S.png I believe it is achievable with CSS, but I am unsure of where to begin. Can someone provide guidance on how to recreate this menu style? I do not have any existing code to sha ...

Tips for populating array values in a dropdown menu and displaying selected data in the user interface when using React Native

I am working on a code where I need to handle an array called contactMedium in the response. This array needs to be displayed in a dropdown menu, with the "name" field as the visible option. When a user selects a name from the dropdown, all corresponding v ...

What are the steps to design a versatile gallery page that can serve various projects?

Allow me to get straight to the point. What is my goal? I am aiming to develop galleries for various projects. Each project's thumbnail on the main page should open a gallery as a new page. These galleries will all have the same layout but different ...

Exploring the Isolation of Scope in AngularJS version 1.2.9

I've implemented Scope Isolation in one of my directives, but I'm encountering some issues: <div ng-controller="MyCtrl"> Hello, {{name}}! <dir info='spec'> {{ data }} </dir> </div> var myApp = ...

Next.js presents a challenge with micro frontend routing

In the process of developing a micro frontend framework, I have three Next.js projects - app1, app2, and base. The role of app1 and app2 is as remote applications while base serves as the host application. Configuration for app1 in next.config.js: const ...

How to place an absolutely positioned div inside a scrollable div with overflow-y: scroll

Here is the HTML code: <div class="container"> <div class="scrollable-block"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, whe ...

PHP and AJAX facing compatibility issues

I have been working with a MySQL database using PHP. Initially, I focused on refining my PHP code to interact with the database by utilizing prepared SQL statements. Upon testing the code with POST requests through Python, I received the expected outcomes. ...

jquery datatable row location in terms of height

Utilizing the jQuery datatable for displaying and editing data on my website has been a useful tool, however, I have encountered a small issue when it comes to editing values in the columns. Whenever I click the edit button on a row, the datatable jumps sl ...

How does GitHub create their unique "character portraits" for optimized web performance?

Have you ever noticed that the small images on Github are actually characters instead of traditional image files? Let's take the small person image that is used when assigning someone to an issue as an example. When you hover over the small person ima ...

What is the best way to format Select2 pre-population using Ajax?

We have come across different methods of pre-populating selected options for Select2, but none of them seem to address the issue of formatted lists and selection options. A JS fiddle showcasing this problem can be found at https://jsfiddle.net/gpsx62de/26/ ...

Creating a drop-down menu using JavaScript and Selenium in Java without specifying a value or ID

I'm encountering an issue with clicking on a drop-down menu and selecting an option in Selenium. Despite my attempts to utilize the .click() method, it hasn't been successful. As a newcomer to Selenium, I've been searching for a solution wi ...

Randomly generated numerical value in input field

How can I generate a 15-digit number using JS code and then reduce it to just 5 or 6 digits in a text box? <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script type="text/javascript ...

Finding elements based on their position using Javascript

I'm searching for an optimal method to identify all elements located within a specific range of pixels from the top of the page. Currently, I have implemented a straightforward test called inRange function inRange(el, from, to) { var top = el.offs ...

Is there a way to move information from one RadComboBox to another RadComboBox on a separate page?

Is it possible to transfer the selected values from three RadComboBoxes on one page to three RadComboBoxes on another page, maybe using URL JavaScript? If you need my code, please feel free to ask. ...

Adjust the image size to match the background image proportionally

My website has a background defined in CSS as follows: body{ background-image:url(BackgroundImage.jpg); background-size: 100%; background-repeat: no-repeat; I also have several other images positioned on top of the background, like this example: #Logo{ ...

Using `vertical-align` on a `span` inside a flexbox container may not produce the desired result

Some users are experiencing issues with the vertical-align: middle property not working on a span. .tc__timezone-toggle { display: flex; } .tc__timezone-toggle span { vertical-align: middle; } .tc__timezone-toggle-ui { display: block; font-wei ...

Issues with displaying AngularJs directive template

Having an issue with my AngularJs directive. Everything works perfectly fine when I use the "template" attribute, but when I switch to using "templateURL", it stops working. Both the JavaScript file for the directive and the HTML file for the template are ...

Is there a way to retrieve arrays nested within an object in Vue or JavaScript?

In my Vue instance, I have a data object named items <script> export default { data() { return { selected: "", items: { item1: [{ selected: "", inputType: "", inputTarget: "" }], ...

Guide on how to set the grid cell width to 0 for specific dimensions

What can be used in place of mdl-cell--0-col-phone to either disable an element or make its width zero? <div className="mdl-grid"> <div className="mdl-cell mdl-cell--2-col-phone mdl-cell--2-col-tablet mdl-cell--2-col-desktop"> <Left ...