Stop the entire page from scrolling when scrolling within a specific div element

I am looking for a solution to prevent the page from scrolling back to the previous section while scrolling within a specific div element. Currently, I am using Alvarotrigo's fullpage scroll plugin, although I am not sure if that is relevant to the issue at hand. Essentially, there are two "pages" on this webpage. The ".table-responsive" element is on the second page and I have set it to have overflow:scroll. However, when scrolling up within that div, it also scrolls up to the first page.

I have attempted the following code snippet, but it did not resolve the issue:

$('.table-responsive').on( 'mousewheel DOMMouseScroll', function (e) { 

var e0 = e.originalEvent;
var delta = e0.wheelDelta || -e0.detail;

this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30;
e.preventDefault();  
});

Here is the HTML code snippet:

<div class="table-responsive">
   <div class="table">
      <thead>TABLE</thead>
      <tbody>...</tbody>
   </div>
</div>

And here is the CSS code snippet:

.table-responsive {
width: 70%;
text-align: left;
margin-top: 30px;
margin-bottom: 30px;
margin-left: auto;
margin-right: auto;
height: 40vh;
overflow: scroll;
border: 3px solid #fff;
background-color: rgba(0,0,0,0.6); 
}

Answer №1

$('.table-responsive').hover(function(){
  $('body').css('overflow', 'hidden');
}, function(){
  $('body').css('overflow', 'auto');
});

I believe this is the solution you were seeking.

Answer №2

.table-responsive {
width: 70%;
}
or
.table-responsive {
width: 250px;
}

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

Chained module incorporating a specialized Angular form validation directive

I've been working on incorporating an angular form validation "plugin," but I've hit a roadblock trying to utilize the directive in a child module. As a test, I'm using the HighlightDirective example. @Directive({ selector: '[highligh ...

Creating a line using CSS to connect two elements

I've been attempting to divide a series of circles with a line down the center. However, when I position a line (.Line1) to run between the first and last circle, it appears centered at the top left of the first circle instead of being truly centraliz ...

Error: An unexpected token '<' was encountered during the React Webpack build process

My ReactJs project is using Webpack4 and @babel/core 7. However, when I attempt to build the project, I encounter the following error in the terminal: ERROR in ./src/views/Pages/Login/Login.js Module build failed (from ./node_modules/babel-loader/lib ...

The alert dialog does not appear when clicking on "a"

Attempting to retrieve the ID of the clicked element using jQuery has proven unsuccessful for me. Below is the jQuery code I am working with: <script> $(function(){ $("a.step").click(function(){ var id = $(this).attr('id'); ...

What is the best way to attach an attribute to a element created dynamically in Angular2+?

After reviewing resources like this and this, I've run into issues trying to set attributes on dynamically generated elements within a custom component (<c-tabs>). Relevant Elements https://i.stack.imgur.com/9HoC2.png HTML <c-tabs #mainCom ...

Incorporating Sass into an HTML document

Recently, I discovered Sass and went through its documentation. I successfully installed the package on my Ubuntu system alongside Ruby and Haml. Now I'm eager to learn how to use it with Wordpress or a basic HTML file. Being new to this, I'm see ...

New solution for Java applet requiring communication with browser using JavaScript

Within our web platform, we have been utilizing a Java applet to interact with the MS Word application using jacob jar. This allows users to open, edit, and automatically upload files to the server upon saving. However, due to Google Chrome discontinuing ...

Error Message: Unexpected character "C" found in JSON response from Ionic 2 Http GET request

Trying to execute a GET request and extract data from the response. this.http.get('http://localhost:8888/maneappback/more-items.php').subscribe(res => { console.log(res.json()); }, (err) => { console.log(err); }); An error message ...

Is it possible to extract elements from a single list and insert them onto various pages?

Currently, I am retrieving items from a list using an ajax call. After constructing the HTML content, I insert these items onto a page. Now, I want to extract the same items and display them on another page with a different style. Is there a method to conn ...

The groupings of D3 chart values do not reflect the loaded JSON data

I have encountered an issue with the grouping (Countries) in my JSON query while using a D3 chart to present the data. The current implementation is causing the data to display more than one line for some countries (e.g. Canada). Below is a snippet of the ...

Ways to retrieve, assign, and choose elements utilizing data attributes?

I'm struggling to utilize data-attributes properly, nothing seems to be working and I suspect I might be missing something: Setting the data manually: $('#element').data('data1', '1'); //I have tried adding the data man ...

What is the correct way to handle BINDing both before and after POPSTATE events when using AJAX?

When dealing with slow AJAX processes, displaying a "loading..." message to the user was deemed beneficial. I have experience using history.pushState and history.popState, but my loading image does not show up when performing actual AJAX requests upon pres ...

"Optimizing reload time for DIV content with jQuery's .load function is proving to be

I am currently facing an issue with a div that displays data from a database and a form that updates item quantities. After submitting the form, the div refreshes while a modal with a bootstrap spinner pops up to indicate it is loading. The problem arises ...

Cross-Origin Resource Sharing (CORS) for HTML

Here is a code snippet I found on http://jakearchibald.com/scratch/alphavid/ $("#video").append('<video id="movie" style="display:none" autobuffer><source id="srcMp4" src="https://host-away-from-host.com/file.mp4" type=\'video/mp4; ...

Updating the value of a key within a jQuery object

A custom modal plugin has been developed with options that can be set by default or by the user. These values are passed to a function for updating, and it is desired that the options object as a whole is updated rather than individual values. The user&ap ...

Hide Navbar when clicking on menu item

I'm struggling with finding a solution to this issue, as I am unsure of how to proceed. The problem I am facing is that when I click on an item, the router-view changes correctly, but the menu remains open. I would like it to close after a click. ...

When using NVDA, the close button is being read multiple times, whereas in JAWS it is being read correctly

Here is the code for a close button within a modal pop-up: <h2 class="sc-ejdXBC byjYiM MuiTypography-root MuiTypography-h6 sc-EoWXQ kOYWJk MuiDialogTitle-root" id="popupTitle"> Default Pop-UP Title <button class="sc-dm ...

Despite awaiting them, promises are not resolving synchronously

I have a function that retrieves location information and returns a promise. I use mobx to manage the store, updating the this.locationStoreProp and this.hotel.subtext properties. public fetchPropertyLocation(some_input_params): Promise<any> { ...

Stranger things happening when incorporating a generator function in React

Here's a simplified version of my component. It includes a generator function that cycles through values. const App = () => { const [state, setState] = useState("1") function* stateSwitch () { while (true){ yield "2" yield "3" ...

Choosing Drop Down Options Dynamically with Jquery

I have a total of 4 Drop Downs on my page. https://i.stack.imgur.com/6tHj5.png Each drop-down initially displays a "--select--" option by default. Additionally, each drop-down has a unique ID assigned to it. The second drop-down is disabled when the abov ...