Preventing scrolling in one div while focusing on another div

I am currently in the process of creating a website that functions as a single page site.

The main feature of the site is a masonry grid of images. When a user clicks on an item, a detailed panel slides in from the left. Once the panel is closed, it slides out and the grid reverts back to its original position.

However, I'm facing an issue where the scroll resets when the grid comes back into view. This can be frustrating for users, especially if the grid contains hundreds of items.

I have attempted to cache the scrollTop of the grid div and apply it to the close button of the panel so that the grid returns to its initial position. Unfortunately, this solution only worked with a timeout function, which is not the desired effect.

I am looking for a way to lock the grid while the panel is displayed and unlock it once the panel is closed. Is there a method or technique that could achieve this?

You can view a basic example of the structure in this JSFiddle: http://jsfiddle.net/kxdy3bb5/2/

var $workItems = $(' #workLinks > li '),
    $sectionWork = $(' #workSection '),
    $workPanelsContainer = $('#panels'),
    $workPanels = $workPanelsContainer.children('div'),
    $closeWorkItem = $('div#closeBtn');

// Functionality when clicking on a work item
$workItems.on('click', function (event) {

    // Minimize main section
    $sectionWork.addClass('slide-out');

    // Display panel for selected work item
    var $panel = $workPanelsContainer.find("[data-panel='" + $(this).data('panel') + "']");
    currentWorkPanel = $panel.index();
    $panel.addClass('show-panel');
});

// Close current work item and show the list again
$closeWorkItem.on('click', function (event) {

    var $currentPanel = $workPanels.eq(currentWorkPanel);

    $sectionWork.removeClass('slide-out');
    $workPanels.eq(currentWorkPanel).removeClass('show-panel');
    $('.workWrapper').scrollTop(1000);
});

Any assistance or suggestions would be incredibly valuable and appreciated.

Answer №1

To adjust the scrollbar position, utilize JS properties such as scrollTop and scrollLeft. In your particular situation with transitions, it's necessary to wait until the transition is complete and the list is back in view before setting the scrollTop to the last known position. This can be achieved by utilizing the transitionend event.

$sectionWork.on('webkitTransitionEnd', function(e){
if(!$(this).hasClass('slide-out') && bodyScrollTop){
    document.body.scrollTop = bodyScrollTop;
}

Refer to this http://jsfiddle.net/e8zb31j2/1/ for more information.

Alternatively, you can opt to use the scrollbar within a div element instead of the body scrollbar. Simply include the properties height and overflow-y:

#workSection {
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    height: 100%;
    overflow-y: auto;
}

Checkout http://jsfiddle.net/e8zb31j2/3/ for an example implementation.

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

What is the most efficient way to accelerate the process of creating jQuery UI Dialogs for a vast quantity of HTML

I am faced with a situation where I have a table containing a large amount of HTML and I'm attempting to set up a jQuery dialog for it. However, the process is extremely slow (taking about 8 seconds in Internet Explorer), which is not acceptable. Typi ...

Adjusting the view to focus solely on the visible portion of the webpage

Is there a way to achieve zooming in and out on a website similar to how it works on the site ? I want only the visible area to zoom in or out when users interact with their browser. I searched online for a solution but couldn't find one. Any suggesti ...

How can jQuery-based Ajax/PHP be leveraged for synchronization effects?

I am currently in the process of creating a groceries application that allows for synchronization with other family members who are part of a 'family' group. When one member updates the grocery list on their device, the changes should automatical ...

Is it possible to retrieve the `arguments` objects if one of the parameters is named "arguments"?

This code snippet will output 1: (function (params) { console.log(params); }(1, 2)); The params object has replaced the default arguments. Can we retrieve the original arguments object within the function's scope? ...

Dynamic loading of dependent dropdowns for ActiveAdmin based on the selection made in the first dropdown

As a newcomer to the realm of Ruby on Rails and Active Admin, I find myself tasked with creating two dropdown lists: one for location and another for game. The relationship between location and game is crucial here. Upon selecting a location from the drop ...

Is there a data attribute associated with a specific element?

Is there a way to verify the presence of a custom data attribute linked to an element? Below is the code snippet I'm referring to. How can I determine if the img tag has any data-* attributes associated with it? <img id="myImg" src="#" data-tablet ...

Creating a shared component for restricting input to only numbers in ReactJS with Material-UI TextField

I am currently working with MUI TextField and my goal is to implement a validation that allows only numbers but not the eE+- keys. I aim to create a standard component for this using onChange event. I need to address the scenario where if the user enters ...

Assign a value to a locally scoped variable within an iteration in Angular 2

Within my Angular code, I have the following HTML snippet: <span *ngIf="ControllerType?.AttributeID =='Controller Type'"> <select multiple name="ControllerType.Default" [(ngModel)]="Contro ...

Having trouble maintaining the original events on a cloned element

My goal is to duplicate an element passed into a function and retain all associated events, including ones like $('.example').on('click', function(e) ... )} that are defined within the document ready. Here's what I'm trying: ...

Attempting to showcase JSON response within an HTML page using JavaScript

Can anyone help me troubleshoot my code for displaying JSON data on a web page? Here's what I have so far: <button type="submit" onclick="javascript:send()">call</button> <div id="div"></div> <script type="text/javascript ...

Is there a way to retrieve the original JSON string from a GWT JavaScriptObject?

Working with JSONP in my GWT application has presented some challenges. When the server sends a json string, I am able to retrieve it in the form of a JavaScriptObject on the client side. The issue arises when my json data contains complex structures, usi ...

Is there a way to change this from webkit to moz?

Is there a way to change this code from webkit to moz? background-color: #fff; background-image: -moz-linear-gradient(0deg, transparent 79px, #ABCED4 79px, #ABCED4 81px, transparent 81px), -moz-linear-gradient(#EEE .05em, transparent .05em); ...

Displaying every outcome of a PHP script with AJAX

When sending data to a PHP file using AJAX and receiving a response, I encounter the following code: while($i<14){ echo $i.'<br />'; $i++;} This code returns 14 repetitions. Upon calling data from my webpage using the AJAX method, it ...

Using jQuery to smoothly scroll to a specific class name

I am faced with an HTML code snippet that looks like this: <div data-stored="storenow" data-save="save" class="saveIcon" data-unique="game">Save</div> My intention is to use jQuery to scroll to the game number 456 as shown below. var contain ...

The Google Maps API is not providing any data in response to my jQuery JSONP request

Similar Topic: Unpacking Google Geo API (Reverse Geocoding) using jQuery $(window).load(function() { var purl = "http://maps.googleapis.com/maps/api/geocode/json?latlng=32.759294499999996,-97.32799089999999&sensor=false"; $.getJSON(purl,f ...

Guide to assigning values to Input<input> and Select <select> elements using Javascript

I am looking to automatically set values in an input or select tag based on certain conditions defined in the JavaScript code below. However, I am facing an issue where the data does not get reflected in the database upon submitting. Any suggestions or cod ...

Performing a request using the jQuery AJAX method with a 'post' method

Recently delving into the world of jQuery and Ajax, I'm encountering difficulties with a 'post' operation. The issue arises when attempting to save data to a database using a jQuery Ajax 'post' call. For some reason, it's pas ...

I'm seeking a way to access the input element within the InputGroup component of BlueprintJs in my

The BluePrintJS React InputGroup component offers a convenient user interface for modern applications. However, it does not provide direct access to the internal <input> element. There are two primary reasons why I need to access the input element: ...

Preventing simultaneous ajax requests

Similar Question: How to stop a jquery.load() request? So I'm dealing with an autocomplete field that's sending an ajax request every time a key is pressed, causing significant slowdown. If you check out this link and log in with the details ...

What is the best way to use jQuery to filter data in a table by clicking on a specific table row?

My website contains a table with player names and servers, but I want to make them clickable for filtering purposes. For instance, clicking on a player name should reload the leaderboards to show which servers that player plays on, and clicking on a server ...