"Opt for scrolling within the div rather than the entire page

I am currently working on a website that features a unique lightbox, which serves as a "View Source" button. When clicked, the background darkens and the source code appears; however, scrolling is only possible if the mouse hovers over a specific div (in this case, pre). I want the ability to scroll the main lightbox even when my mouse is positioned in the top corner of the page. To address this issue, I have added the following CSS:

overflow-x: hidden;
overflow-y: scroll;

I believe solving this problem may require some JavaScript or jQuery knowledge, but I am not sure where to start.

You can see the lightbox feature in action on this page by scrolling down and clicking 'View Full Code'.

Does anyone have any suggestions on how to achieve this functionality?

javascriptjquerycssscrolllightbox

Answer №1

A simple approach to achieve this is by following the steps detailed here: http://jsfiddle.net/pimvdb/Ezvnp/3/.

$('body').bind('mousewheel', function(e) { // on scroll
    var $div = $('div');

    // update div scroll position by adding/subtracting current mouse wheel movement
    $div.scrollTop($div.scrollTop() 
                    - e.originalEvent.wheelDelta);

    return false; // prevent default body scrolling behavior
});

To enable/disable scrolling, you can introduce a boolean variable and only lock the scroll when its value is set to true, such as demonstrated here: http://jsfiddle.net/pimvdb/Ezvnp/4/.

var locked = true;

$('body').bind('mousewheel', function(e) {
    if(locked) {
        var $div = $('div');

        $div.scrollTop($div.scrollTop() 
                        - e.originalEvent.wheelDelta);

        return false;
    }
});

$('button').click(function() {
    locked = !locked;
});

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

The disappearance of the overlay background due to modal reload in NextJS dynamic routing

I am working on a simple NextJS app where clicking on a page opens a modal with updated URL but without triggering a new navigation. The content inside the modal is displayed, while the actual page location is reflected in the URL and refresh takes the use ...

javascriptreactjsnext.js

What are the steps for implementing Jquery Datatables Ellipsis renderer with a template field link button?

When I utilize this with the Asp-bound field, everything works perfectly. Observe how column one is Ellipsed. https://i.sstatic.net/5knrN.png However, when used on a template field link button, it returns blank. It appears blank; I'm not sure what ...

javascriptc#jqueryasp.netdatatables

Tips on transmitting checkbox data from AJAX to PHP

I'm currently working with this code and facing an issue where data from checkboxes is being sent to PHP one by one. I want to be able to send multiple selected data at once. How can I modify the code to achieve this? $('#lunas').click(funct ...

javascriptjqueryajax

Failure to properly evaluate the ID string in Express

I'm currently developing an express app and I am facing an issue with adding a friends list on a user's profile page. The user has an array of friends, which is essentially an ID pointing to another user. However, when comparing this ID to the us ...

javascripthtmlnode.jsexpressejs

Switch between text box and label appearances based on focus

I am working with a template field in my gridview. This template field consists of a text box. I am looking to achieve the functionality where after the user finishes writing in the textbox and moves to the next one, the textbox that loses focus will trans ...

jqueryasp.netcssgridviewtemplatefield

How to extract the value of an object from an array using jQuery

I have a set of four input fields: <input type="text" class="kal" name="data[tex1]"> <input type="text" class="kal" name="data[tex2]"> <input type="text" class="kal" name="data[tex3]"> <input type="text" class="kal" name="data[tex4]"& ...

javascriptjquery

`switch tabs visibility based on checkbox selection`

There are 4 tabs available on a JSP page: Tab 1, Tab2, Tab3, and Tab4. Initially, only Tab1 is enabled, allowing users to freely work within that tab. However, Tabs 2, 3, and 4 are disabled, preventing users from accessing their contents. A checkbox is lo ...

javascriptjquerycssajaxjsp

Tips for addressing Navbar collision with body content or other pages using CSS

I have successfully created a navigation bar using CSS and JS. The image below illustrates the example of my navigation bar: https://i.sstatic.net/2l4gj.png The issue I am facing is that when I select "MY ACCOUNT," it displays some content. However, upon ...

javascripthtmlcss

Create a JSON array containing multiple objects and group their values by their respective names

Working on a JavaScript project where I need to group JSON object values dynamically based on a specific key word in the array. Each object in the array contains time values. The length of the array, called time_entries, can vary. This array can have on ...

javascriptjson

The upload of files via Websockets is displaying corruption or improper encoding issues in PHP and JavaScript

I am currently working on developing websocket scripts using PHP and JS, but I am facing an issue when it comes to saving a file (image). When sending from JS: $('#frmChatFile').on("submit",function(event){ event.preventDefault(); var f ...

javascriptphpfilewebsocketsave

The Rails application is loading JavaScript three times

I am encountering an issue with my ajax function where it is being triggered multiple times upon click instead of just once. $(document).on('click', '.newGameItem', function() { console.log('start click event'); var a ...

javascriptruby-on-railsajaxturbolinks

The function ng-click does not successfully uncheck ion-radio

In the process of developing my application using the ionic framework, I encountered a challenge where I needed to deselect an ion-radio button when clicking on an input tag. Despite attempting to achieve this functionality through this ionic play link, I ...

javascriptangularjsionic-framework

Take away the text caret or pointer from the input that is currently focused and in

I want to display value in an <input readonly="readonly"> field without it looking like an interactive field. This method is helpful for preventing users from editing a field while still allowing the value to be displayed. I am aware that there are ...

htmlcssformscaret

Creating an Array of dynamically generated elements using jQuery

A dynamic table is being generated using jQuery's .append() function: $el.append('<tr data-id=' + data[i].id + ' data-token=' + data[i].token + '><td>' + data[i].order + '</td>\n\<td&g ...

javascriptjqueryhtmlajax

What sets declaring variables apart in Vue?

Can you clarify the distinctions among various methods of declaring variables? When should I employ each of these declaration methods? <script> const someVariable = 12345 export default { name: 'App', } </script> <script> e ...

javascriptvue.jsvuejs2

Are you considering getting rid of a function?

I have a small function that changes a div to position:fixed after a link is clicked. $(window).load(function(){ $('#linktofreeze').click(function() { var ftop = $('#fixedbox').offset().top - $(window).scrollTop(); ...

jquery

Eliminate item from array if it is found in JSON data

I have implemented a script to eliminate JSON objects from an array that exist in both the array itself and another JSON object: var stageChildren = stage.sprites; for (var i = 0; i < stageChildren.length; i++) { for (var x in mainMenu) { if ...

javascriptarraysjsonobject

css - adjust flex box to cover half of the screen and increase its size

I'm having trouble getting my CSS Flex-box to stretch the full height of the right side of the screen from the center. I want it to cover the entire right half of the screen at full height. https://www.cajsoft.co.uk/test/visitor2.html Any help with m ...

htmlcss

Implement image effects in a single div by leveraging the jquery functions .fadeIn/Out and .delay(300)

Is it possible to use jQuery to achieve the following task? I currently have a <div> with an id="divid", and inside is an <image source="images/myimage01.jpg">. I am looking for a script that can sequentially load/loop images from <img src ...

jqueryimage

Discover how to access the DOM after AngularJS directive rendering is finished

Looking to create a unique scroll pane component using an AngularJS directive? Check out this jsfiddle example for a basic prototype. Here is the concept behind my custom scroll pane: Directice code snippet: myApp.directive('lpScrollPane', ...

javascriptwebwidgetcomponentsangularjs