Setting the overflow-y property to hidden on an element prevents the scroll reveal animation from activating

Currently, I have implemented scrollreveal.min.js on my WordPress website.

Although Scroll reveal is functioning properly, I encountered an issue when trying to hide the vertical scroll bar that appears during animation for a specific section using 

overflow-y:hidden;

While this did successfully hide the scroll bar for the element, it unfortunately caused the animation on scroll to stop working for each item.

Additionally, I have a question about hiding the overflow vertically - I noticed that in order for overflow-y:hidden; to take effect, I had to comment out overflow:auto; Is there a way for these two to work together seamlessly?

javascriptjquerycssscrollreveal.js

Answer №1

When using overflow-y:hidden, it essentially clips the content without providing any scrolling mechanism, according to W3 schools. This results in the inability to scroll further, similar to how an image is cropped and you cannot view the entire image. To address this issue, you may want to consider implementing a solution like the one described here: Hide scroll bar, but still enable scrolling

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 reason for calling specific functions as "illegal invocations" in JavaScript?

Imagine this scenario: var q = document.querySelectorAll; q('body'); Suddenly, an "Illegal invocation" error pops up in Chrome. It's puzzling why this happens, especially considering that not all native code functions behave this way. Tak ...

javascriptinvocation

What could be the reason for my AJAX function transmitting form data to the designated URL?

After a user submits their form, my goal is to utilize JQuery/AJAX in order to prevent the page from redirecting or reloading. The issue I am facing is that despite using the POST method, the user data is being refreshed and displayed in the URL! On my l ...

phpjqueryajaxformspost

The function exclusively examines the final element within the array

When validating user-submitted emails in my function, I compare each email to a list of valid email domains. The user emails are stored in an array, as well as the valid email domains. However, the issue arises when using the function as it only checks if ...

javascriptreactjs

Is there a way to preserve all the downloaded node modules in the package.json file?

Is there a way to keep track of all the node modules installed in package.json without the need for reinstalling them? I've heard about running npm init --yes, but I'm not entirely convinced if that will do the trick. Any assistance on this mat ...

javascriptnode.jsnpmnode-modulespackage.json

Methods for identifying when a Vue component has been updated based on property change

I have a requirement to show a spinner in every Vue component. My initial thought is to use v-if="loading" within the component's HTML. How do I know when a component has finished loading? In other words, how can I tell when the DOM has be ...

javascriptvue.js

Establish the starting time for the timer and use the setInterval() function according to the seconds stored within the object

How can I configure the values of timerOn, timerTime, and timerStart to make the watch start counting from 120 seconds? Currently, the clock starts counting from 3 minutes and 22 seconds, but it should start from 2 minutes. You can find all the code here: ...

javascriptreactjs

Learn how to retrieve values from a .json file in real-time and then perform comparisons with user input using Python

I have a JSON file structured like this: [ { "name": { "common": "Aruba", "official": "Aruba", "native": { "nld": { "official ...

javascriptpythonarraysjson

ng-animate causing an impact on the input element, even though it is not supposed to

As a newcomer to angularjs, I'm facing a challenge in animating only specific elements within my app. To achieve this, I have included the ngAnimate module in my app setup: var mrApp = angular.module("mrApp", ["ngRoute", "ngAnimate", "templates"]); ...

javascriptangularjsanimation

Error: The function 'toEqual' is not recognized by the 'expect' method causing

I've been following along Dan Abramov's Redux tutorial which can be found at () Lesson 9 covers testing and the usage of expect and .toEqual() This is the code I'm working on: var expect = require('chai').expect; var freeze = re ...

javascript

Troubleshooting Issue with jQuery onclick Function not Transmitting Data

Why is this error occurring: Uncaught TypeError: Object [object global] has no method 'data' HTML: $attributes = array('class' => 'main post', 'onsubmit' => 'validateModules(event)', 'dataid& ...

javascriptjqueryajax

Alignment of slider arrows in a CSS carousel with Bootstrap 4.1.1

Is there a way to position the carousel control arrows at the left and right ends of the screen in Bootstrap 4.1.1? I attempted the code below but it didn't yield the desired result. .carousel-control .icon-prev{ left: 5px } .carousel-control .icon ...

cssbootstrap-4carousel

Has the binary search operation not been executed?

My attempt to implement the binary search algorithm in my code example is not producing the expected result. I'm unsure of the cause. Can someone please explain it to me? var array = [1, 4, 6, 8, 9, 12, 15, 17, 19, 34, 55, 78, 80]; function binarySe ...

javascriptarraysalgorithmsearchdata-structures

Ensure that the left menu remains fixed at full page height of 100%

I'm currently working on developing a website layout that includes a left menu bar and right content section, both of which are independently scrollable. However, I'm encountering a few challenges: The left menu bar doesn't cover the enti ...

htmlcss

Issue with PHP files causing progress bar to malfunction during AJAX request

I am struggling to display a progress bar when I make an ajax request. $.ajax({ url: 'http://www.domain.de/test.html', xhrFields: { onprogress: function(e) { if(e.lengthComputable) { _this.find('.process-loading&apos ...

phpjqueryajax

Modify the URL and show the keyword utilized in a search module

Does anyone know how to update the URL in a search bar? I'm using Redux to display search results, but the URL remains the same. How can I make the URL show the keyword being searched, like this: http://localhost/seach?q=keyword ...

javascriptreactjsreact-routerreact-redux

Display a div using Ajax by triggering a PHP function

I have a hyperlink that reveals more information based on the value it combines. Whenever I click on this hyperlink, I want to display the corresponding values by opening a div using ajax on the same page. Check out the link below: <a class="dropdown ...

phpjquerymysqlajax

Can an event be initiated on dynamically loaded iframe content within a document using the jQuery "on" method?

Is there a way to include mousemove and keypress events for iframes? The code provided seems to work well with existing iframes on the page, but it doesn't seem to work for dynamically created frames in the document using JavaScript. $('iframe&a ...

javascriptjqueryiframejquery-on

Learn how to transform the default arrows in vis.js into quirky chicken feet or elegant cardinality symbols

I'm exploring the possibility of using vis.js to visually represent the structure of an XML or JSON Schema. Instead of arrows, I want to display cardinality information. Does anyone have recommendations for documentation that can help me with this? I ...

javascriptedgescardinalityvis.js

Tips for effectively passing navigation as props in React Navigation with Expo

How can I correctly pass navigation as props to another component according to the documentation? The navigation prop is automatically provided to each screen component in your app. Additionally, To type check our screens, we need to annotate the naviga ...

javascriptreactjstypescriptreact-nativereact-navigation

What is the best way to implement Bootstrap in Coda2?

I am new to web design and I am trying to incorporate Bootstrap into my HTML code using Coda2. Since I don't have access to a server, I am referencing the directory address of CSS files on my hard drive instead of a web address. Currently, the beginni ...

htmlcsstwitter-bootstrapcoda