Prevent parent from scrolling when hovering over a div in HTML5

Unfortunately, the scrolling attribute is not supported in HTML5. I'm facing an issue where I have an svg inside an iframe within a div, and I need to enable scroll functionality within the div while preventing the page from scrolling at the same time using HTML5.

I've attempted various solutions such as:

mouseWheelEvent.cancelBubble = true;

as well as:

$('#svgDiv').bind('mousewheel DOMMouseScroll', function(e) {
    var scrollTo = null;

    if (e.type == 'mousewheel') {
        scrollTo = (e.originalEvent.wheelDelta * -1);
    }
    else if (e.type == 'DOMMouseScroll') {
        scrollTo = 40 * e.originalEvent.detail;
    }

    if (scrollTo) {
        e.preventDefault();
        $(this).scrollTop(scrollTo + $(this).scrollTop());
    }
});

Unfortunately, none of these approaches seem to be effective. Any assistance would be greatly appreciated.

javascriptcsshtml

Answer №1

To achieve this effect, you can use CSS by keeping the parent smaller than the child and applying the style overflow:scroll.

You can control the scroll orientation by using the property overflow-y for vertical scrolling and overflow-x for horizontal scrolling.

.child{

  background: goldenrod;
}

.parent{
  overflow-y: scroll;
  width: 220px;
  height: 200px;
}
<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <div class="parent">
      <div class="child">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae orci in libero iaculis bibendum vel at velit. Etiam ornare ex urna, quis tristique dui finibus a. Suspendisse potenti. Aliquam scelerisque nibh ipsum, vestibulum suscipit purus eleifend a. Phasellus dictum venenatis velit, ac ultrices tellus finibus et. Cras elit nulla, facilisis non imperdiet et, rhoncus volutpat nisl. Donec id magna elementum ex cursus mollis.

Nullam facilisis non nibh ut pharetra. Aenean et maximus nulla. Curabitur dignissim nunc in arcu porta, et imperdiet sem maximus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus fermentum rhoncus sem eget pharetra. Nulla augue ipsum, condimentum et orci sit amet, ultricies dictum nunc. Donec porta lacus at tristique vestibulum. Cras et nibh enim. Mauris sagittis risus et orci tristique...
        
      </div>
    </div>
  </body>

</html>

I have created a plunker example to demonstrate this solution. I hope it helps you. Good luck!

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

Exploring the power of AngularJS through nested directives

Index.html: <nav-wrapper title="Email Test"> <nav-elem value="first"></nav-elem> <nav-elem value="second"></nav-elem> </nav-wrapper> app.js: app.directive('navWrapper', function() { return { ...

javascripthtmlangularjsnesteddirective

The success function in Ajax is constantly elusive, while the error function prevails. The data just can't seem to make it to the destination file

Thank you for your patience. This marks my initial post to the best of my recollection. The section below showcases a snippet from my calendar.js script. My current objective involves sending data obtained from a modal window in index.php over to sql.php. ...

javascriptphpjqueryajaxpost

Ways to retrieve an array following a function call

After a lot of testing and troubleshooting, I finally got my array to function properly in the console. However, when I click the button, the array is displayed on the console but not in my HTML. TS: jogar(){ for(var u=0;u<6;u++){ this.y ...

javascriptangularionic2

In order to set a condition for the mat date picker to display a text box in Angular if the selected date is for someone under 18 years old

I need assistance with displaying a text field based on age validation. The requirement is to show the input field only if the age is less than 18. Below is the code snippet I am currently working with: <form [formGroup]="form"> ...

javascriptangulartypescriptangular8mat-datepicker

Explore an array of elements to find the correct objectId stored in mongodb

element, I am faced with a challenge of searching through an array of objects to find a key that contains nested object id for populating purposes. Exploring My Object { service: 'user', isModerator: true, isAdmin: true, carts: [ ...

javascriptmongodbexpressmongoose

Replace the default focus state using CSS or resetting it to a custom style

I'm looking for a solution similar to a CSS reset, but specifically for the :focus state. If such a thing doesn't exist yet, I'm interested in learning about the possible properties that can be reset or overridden in order to create a new :f ...

javascripthtmlcssfocus

What is the procedure to change a matter body's isStatic property to false in matter.js upon pressing a key?

During my recent project, I encountered a challenge in trying to set the isStatic property of a Matter Body in matter.js to false when a key is pressed. if (keyIsPressed(UP_ARROW)) { this.body.isStatic(false) } Could you provide guidance on the correct ...

javascriptmatter.js

Ways to manage multiple Observables

Two Observables are being returned from different services, each providing only one value (similar to Observable.just()). In TypeScript, types play a crucial role in this context. Is there a method to determine when both Observables have been resolved (in ...

javascripttypescriptrxjsrxjs5

Show input field depending on chosen option

I'm looking to create a dynamic form where specific input fields are displayed based on the selection made in another field. For example, if "gender: male" is selected, the input field for "blue" should appear, and if "gender: female" is selected, the ...

javascriptjqueryhtmlajax

Unable to retrieve function variables stored in fancytree source nodes within its activate method

If the configuration of my fancytree includes a source like this: source: [{ title: "Item1", key: "1", myFunc: function (item) { return 'function'; ...

javascriptjqueryfancytree

What are the best situations to utilize bootstrap and when should you avoid it?

When it comes to web development, there is often a debate on whether to use Bootstrap or custom CSS for designing a website. For my school project, I am tasked with creating a homepage and contact page using Bootstrap primarily. However, we are also requir ...

csssassbootstrap-5

Sending an email using Angular is a straightforward process that involves utilizing the built

I need help figuring out how to code a function in Angular or TypeScript that will open Gmail when a specific email address is clicked. I've tried different methods but haven't been successful so far. ...

htmlangularemail

One method for assigning a unique identifier to dynamically generated buttons with jQuery

<table border="0" class="tableDemo bordered"> <tr class="ajaxTitle"> <th width="2%">Sr</th> <th >SM</th> <th >Campaign</th> <th >Day1</th> <th >Da ...

javascriptjqueryajax

“Can you confirm if this syntax is correct for defining methods in Vue.js?”

When defining methods in my Vue app, I have chosen to use the following format: methods: { myMethod(arg) { // do something here } } Although it is more common to see it written like this: methods: { myMethod: function (arg) { // do somethi ...

javascriptvue.js

The dynamic data is not displaying on the Chart bundle JavaScript

I am currently utilizing chart bundle js for my project. While everything appears to be functioning properly on alter show, I am encountering an issue with the map display – nothing is showing up as intended. If anyone has a solution to resolve this iss ...

javascriptjqueryajaxchart.jsbar-chart

Flexslider doesn't adjust the height of the viewport when displaying a shorter image in the slideshow

Is Flexslider not resizing its viewport height according to the current image on your site? The fixed height seems to be causing blank white space under shorter images. Are you inadvertently overriding Flexslider's responsive height function? Is there ...

htmlcssflexslider

Enhance your Zara shopping experience with the dynamic image zoom-in

I am currently exploring ways to replicate the image zoom-in feature seen on Zara's product pages. To see this effect in action, visit their site: Upon clicking on the image, it opens up in a popup window where it is enlarged to fit the entire screen ...

jquerycssimageweblightbox

Unable to retrieve JSON data in servlet

I am having trouble passing variables through JSON from JSP to a servlet using an ajax call. Despite my efforts, I am receiving null values on the servlet side. Can someone please assist me in identifying where I may have gone wrong or what I might have ov ...

javascriptjavajqueryjsonservlets

After signing out, the function getRedirectResult in Firebase is being invoked

I'm a bit confused about some interesting behavior I've noticed while working with Firebase. Although I never used the older version, I believe getRedirectResult is a newer feature since they partnered with Google. Currently, I am using Vue.js a ...

javascriptfirebasevue.jsfirebase-authenticationvue-router

Python Selenium Webdriver: Issues with retrieving text content from hidden elements

I am interested in extracting data from Netflix that includes the following details: 1. Show Name 2. Season 3. Episode Name for each season 4. URL for each episode 5. Duration of each show. Selenium version: 3.141.0 Python version: 3.6.6, utilizing Chr ...

pythonhtmlseleniumchrome-web-driver