Why Won't Your Overflow Scroll Work?

Having trouble getting the div with class .txtpodscroll to scroll? It seems like there might be an issue with nested DIVs or something missing in the code. The scrollbar appears, but it won't actually scroll. Here's the CSS rule applied to the DIV:

.txtpodscroll {
font-family: Tahoma, Geneva, sans-serif;
font-size: 13px;
line-height: 20px;
width: 360px;
margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
height: 300px;
overflow-y: auto;
overflow-x: hidden;
position: fixed;

}

<div class="holder-northeastphotobooth">
  <div class="imgpod"><img src="alt-img/nephotobooth-logo.png" width="370" height="89"></div>
  <div class="txtpodscroll">Photo booths are one of the most sought-after wedding reception additions, and we’ve got one of the best ready to bring to your big day.   We will deliver our professional booth to your venue, assemble it, and man it for the duration to make sure your guests have a great time taking lots of memorable pictures. Afterwards, we’ll dismantle and clear away the booth.   We can be as formal or as crazy as you like and will tailor it to suit your needs. You can select a range of fun green screen backgrounds for guests to choose from, allow uploading to Facebook, add multiple pictures to each print, take videos, and we can even bring along a box full of fun props for your guests to wear.   Hire our booth and you’ll get unlimited pictures and prints on the night, plus we’ll give you a USB stick with all of the pictures on to take away and for a limited time we’ll even supply a 2nd set of prints in a lovely photo album for you to take home and treasure. </div>
</div>

Here is the live link that is not working:

cssscrolloverflow

Answer №1

The reason why the book's inner shadow is not clickable is because it appears above the scrollbar due to being a transparent PNG. You can still see it but cannot interact with it.

Check standard-variable.css at line 83 for the solution:

.holder-northeastphotobooth {
    float: left;
    font-family: Arial,Helvetica,sans-serif;
    height: 470px;
    margin: 0;
    padding: 15px;
    position: relative;  /* added */
    width: 370px;
    z-index: 1;   /* added */
}

Make sure to remove the background property to ensure that the shadow is displayed "under" the page and not on top of it. Easily fix this by testing it in Firebug.

Answer №2

There is a div with the class .wowbook-gutter-shadow positioned over the scroll bar, causing it not to function properly.

To correct this issue, add the style z-index:2 to the class .txtpodscroll.

Answer №3

To prevent scrolling, it is advisable to use percentages for sizing.

.txtpodscroll {
font-family: Tahoma, Geneva, sans-serif;
font-size: 13px;
line-height: 20px;
width: 360%;
margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
height: 300px;
overflow-y: auto;
overflow-x: hidden;
position: fixed;
}

This is particularly useful when dealing with horizontal scrolling.

width: 360%;

I hope this explanation proves helpful in your understanding.

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

Modifying body width for optimal display on both desktop and mobile devices

I've been experiencing difficulties in getting my pages to utilize 100% width. While it displays properly on desktop, occupying the entire page width, a strange issue arises on mobile devices. I am utilizing NextJS and Material-UI, in case that inform ...

htmlcssreactjsnext.js

Is there a way to automatically update the child option when the parent option is altered?

I am attempting to modify the child option based on the parent option selection, similar to how it works in Bootstrap. ` <div class="wrap-input100 input100-select bg1"> <span class="label-input100">Indus ...

htmlcssdrop-down-menubootstrap-5optionmenu

"Discrepancy in column display across various resolutions in Bootstrap 5.3 causing issues

My goal is to have 4 divs that change in width at different resolutions, but for some reason it's not working. I am looking for: When the resolution is ≥992px, the divs should be in the same line (3 columns) When the resolution is ≥768px, the di ...

htmlcssbootstrap-5bootstrap-grid

Turn off the text cursor when inside a specific div block

Check out these two fiddles: fiddle 1 and fiddle 2 The only variation between the two is a single CSS property in .category -webkit-user-select: none; In fiddle 2, when you click and drag an element, the cursor remains as a pointer instead of changing t ...

javascriptjqueryhtmlcss

Adjusting the opacity overlay color in CSS

Is it possible in CSS to specify a different color for the overlap of two opaque elements? For instance, can I make two yellow elements that overlap turn orange at their intersection point? ...

css

Scrolling the page with AngularJS after revealing hidden elements using ng-show

Currently faced with a challenge involving a list of hidden items that I need to show and scroll to with just one click. Here is the code snippet for reference: http://plnkr.co/edit/kp5dJZFYU3tZS6DiQUKz?p=preview Upon inspecting the console, it seems that ...

angularjsasynchronousscrollng-show

Transform one div to another using a CSS animation slide

I am experiencing an issue with two divs (page1 + page2) inside a container (also a div). The container has overflow:hidden property, but when the animation starts, the overflow configuration is being ignored. Additionally, the page that should be displaye ...

jqueryhtmlcssanimation

Issue with setting position to the right using jQuery CSS

I have a div with the CSS property position:absolute. I am attempting to align it to the right using jQuery, but for some reason it is not working as expected. In the code snippet below, I am removing the left positioning and adding right:0 in order to m ...

javascriptjquerycss

Ensure that Bootstrap4 cards are fully stretched to a width of 100%

Does anyone know how to make Card2 and Card3 in Bootstrap4 stretch to 100% width? Card1 defines the total height, but Card2 and Card3 are not taking up the full remaining width. Card1 is already stretched, but Card2 and Card3 are inside a flex column and a ...

htmlcsstwitter-bootstrap

Hover over images for cool effects

Check out the code snippet I created on this link The current functionality enlarges images by 20 percent and overlaps into the table on hover. How can I enlarge both the image and table dimensions simultaneously? Below is the HTML code: <table borde ...

htmlcss

Using CSS to disable an image map in conjunction with dynamically adjusting CSS styling

On the desktop version of the website, there is an imagemap implemented. However, when the site transitions into tablet or mobile view, the imagemap should be disabled to allow for a simpler navigation area to be displayed. I attempted to use the following ...

htmlcssdynamicimagemap

Applying Transparency with CSS Opacity

Hey there! I've been playing around with the CSS Opacity Property on a div tag and it's working great. The only issue I'm running into is that when I add text or images to the div, they also become faded. What I really want is for only the b ...

htmlcss

Animate the width of a div element with CSS from the center

I'm working on a cool menu animation as a little experiment. Here's what I've got so far: HTML <div class="menu"> <div class="bar"></div> <div class="bar"></div> <div class="bar"></div> < ...

javascripthtmlcss

Result of mixing CSS colors

Is there a way to retrieve the result of blending two colors using the color-mix function? In cases where the color-mix feature is not supported, is it possible to set a fixed value instead? ...

csssass

The JQuery.hover() function is experiencing issues with detecting hover events while moving the mouse over

While attempting to enhance the functionality of hovering over a 2048 tile, I encountered an issue. Each tile with a value of n is assigned a class 'tile-n'. Specifically for the basic 'tile-2' tile, I have written hover functionality ...

javascriptjqueryhtmlcsshover

What is the best way to ensure uniform spacing between header elements?

I am having an issue with aligning elements in my header while using justify-content: space-between. When I add padding-right: 20px to my navigation links, it causes my h2 element to shift to the right and disrupts the alignment. How can I maintain the pad ...

htmlcssflexboxpadding

designing items in various color palettes

section { background-color:#d5ecf2; width:1024px; height:200px; margin: 0 auto; } .sectiontext { float:right; height:180px; width:720px; margin:10px; } <section> <div class="sectiontext"> <h3>GDS 114.01: HTML and Javascript</h3 ...

htmlcssarticle

What's the best way to customize a partially collapsible Navbar in Bootstrap 4 to display items exactly where I need them to

Is there a way to make a Bootstrap 4 Navbar only partially collapse? I want certain items on the Navbar aligned to the right to always be visible, while the rest of the Navbar items on the left will collapse into a menu when viewed on mobile devices. The ...

csstwitter-bootstrapbootstrap-4

Is there a lack of a multi-level dropdown menu in React JS similar to React-Bootstrap?

I have been using the following: import Navbar from 'react-bootstrap/Navbar'; import Nav from 'react-bootstrap/Nav'; import NavDropdown from 'react-bootstrap/NavDropdown' However, I am struggling to implement a Multi-Level D ...

cssreactjsbootstrap-4react-bootstrap

``Is there a way to refresh the CSS, button, or a specific part of a webpage after a GET request has been

Upon receiving a GET request, the values appear and the button disappears. View image here. The button functions properly on localhost. See it in action here. I'm attempting to incorporate a Facebook share button on a page with dynamic content like ...

javascripthtmlcssajaxget-request