What is the method for creating vertical scrolling with overflow-y without switching overflow-x to auto?

This question may seem familiar, but I am still looking for a new solution.

Here is the link that closely matches my query:

CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue

The W3C spec mentioned in the above link states:

The values of ‘overflow-x’ and ‘overflow-y’ are computed based on specific criteria related to 'visible' and 'scroll'. The value of 'overflow' depends on the values of 'overflow-x' and 'overflow-y'.

I am still searching for new solutions to this problem.

You can view the issue in my fiddle here: The problem of mine is in this fiddle.

In my fiddle, I have simplified the 'sidebar' class from 'BootStrap'.

overflow-x: visible;
//overflow-y: scroll;

If you notice, I have commented out 'overflow-y: scroll' in the CSS of the '.panel' class.

As a result, 'hover' works but 'scroll' does not. On uncommenting 'overflow-y: scroll', 'scroll' functions while 'hover' doesn't.

Is there a way to make both 'hover' and 'scroll' function simultaneously?

If you have any suggestions or ideas to resolve this matter, please share them.

Or is this problem still unsolvable?

javascriptjqueryhtmlcss

Answer №1

The functionality of your code is functioning properly, however, the hover effect may not be visible due to the width set for the block being only 50px. Additionally, if you apply a position:absolute to the hover, you may see the effect but it could potentially overlap with other elements within that block. I am curious to know if the specific width was intended for demonstration purposes or if you require the same width for the final design.

Answer №2

One approach is to utilize jQuery to dynamically adjust the overflow of the .panel element based on specific events.

In addition, some CSS tweaks may be necessary for optimal results.

For a visual demonstration, check out the updated version on JSFiddle.

Answer №3

This question really caught my attention.

I took the initiative to create a demonstration for you: https://codepen.io/example-demo/pen/qBZYQoz

It seems to align closely with your needs, but please do let me know if it doesn't meet your requirements. I'm more than willing to enhance it further.

Key parts of the code snippet:

.box:hover ul.menu:first-child {
    position: absolute;
    display: inline-block;
    height: 100%;
    width: auto;
    overflow-y: auto;
    overflow-x: hidden;
}

.box ul.menu:first-child {
    display: block;
}

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

Executing a Visual Basic subroutine from a jQuery dialog box

Currently, I have a form that includes a jQuery dialog creation. Within this dialog, there is a button generated from an ASP server control that should trigger a function in the code behind when clicked. However, I am encountering an issue where the functi ...

javascriptjqueryasp.netvb.net

Incorporation of a dynamic jQuery animation

I'm a beginner in jquery and I'm attempting to achieve the following: I want each menu to collapse separately when the mouse hovers over it. The issue is that both menus collapse simultaneously! I know it's probably something simple, but I ...

javascriptjqueryhtmlcss

What is the method for changing a function's parameter type?

Currently, I am involved in a project that is based on classes and I have my primary class which I usually extend to other files because the implementation remains quite similar. Here's one of the functions in the BaseSummaryManager Page Object file: ...

javascripttypescriptoop

Choose to conceal beneath the table within Bootstrap 4

As a budding web developer, I am currently using Bootstrap 4 in my project. If you take a look at my preview by clicking here and then selecting "Liczba sztuk," you'll notice that I am facing an issue. The items within the select dropdown are gettin ...

javascriptcsstwitter-bootstrapbootstrap-4

What is the most effective method for incorporating multi-line breadcrumb links in a React application?

I am currently working on implementing a multiline breadcrumb link feature for mobile and tablet devices. As users navigate through multiple folders, I need to handle scenarios where the number of links exceeds the maximum allowed in the breadcrumb contain ...

javascripthtmlcssreactjs

Using the jQuery unbind method allows the function to execute only once, however, the event will not be

On my main page, I have a radio button that passes a value via Ajax when clicked. The result is then checked by Ajax and the corresponding output is displayed for each question as correct/incorrect. I am facing an issue with the unbind event - it works fin ...

javascriptjqueryajaxcodeigniter

What is the Method for Multiplying Two ng-module Values in AngularJS?

In my application, I am utilizing the MEAN stack with AngularJS for the front-end. I have a table that contains two values - 'Payment value' with commas and 'commission' without commas. How can I multiply these two values? For example: ...

htmlcssangularjsmeanjs

Is there a way to confirm if two JavaScript Objects share identical keys?

My task involves comparing two large JavaScript Objects, each containing approximately 200 keys. The keys in the objects are unordered and have different values, but I am only interested in whether they share the same set of keys. If both objects have the ...

javascript

Angularjs regular expressions for URL routing

Is there a way to create a route /:url that matches http://localhost/#/http://www.google.com In addition, I am looking for a method to retrieve the URL parameter in the controller using: var url = $stateParams.url; // url = http://www.google.com If you ...

javascriptangularjs

The glow shader for front face is not displaying correctly in Chrome, but it functions fine in other web browsers

I have encountered an issue where I am attempting to apply a custom shader material to a series of nested objects in order to create a glow effect around each node. The effect works perfectly on my personal laptop (running Windows 8.1 and the latest versio ...

javascripthtmlgoogle-chromethree.jswebgl

Unusual conduct exhibited by jQuery's css() function for setting the width

My goal is to retrieve the width of the initial .imagen element and apply it to the img within .imagen. HTML: <div class="imagen"> <div class="normal"> <img> </div> <div class="hover"> <img> ...

jqueryhtmlcss

Enhance the numerical worth of the variable through the implementation of the function

I'm working on a JavaScript timer but I'm struggling with assigning the value of a parameter to a global variable. Currently, I can achieve this without using parameters, but I really want to streamline my code and reduce the number of lines. He ...

javascripthtmlfunction

Tips for choosing the desired test to execute with Nightwatch Programmatic API

Currently, I am in the process of developing a web application that enables me to execute Nightwatch tests through a visual interface. At this point, I have successfully been able to run all my tests using a post request from my web app utilizing the Nig ...

javascriptseleniumexpressnightwatch.js

Sharing a specific variable among various React components: Tips and tricks

Within my project, I have created two sibling components called home and history. The home component contains the following function: //home function handledata() { const key = uuidv4(); localStorage.setItem(key, JSON.stringify(formdata)); } Now ...

javascriptreactjs

Organizing your code with precision

I'm struggling with a project due to the poorly formatted code, making it almost impossible to read. Despite my attempts with various plugins and tools in VIM, Netbeans, Sublime Text 2, and Eclipse, the situation only seems to worsen. If anyone has ...

phpjavascripthtml

Error message: AngularJS Jasmine spyOn: number has no functionality

I am encountering difficulties while attempting to execute a test that utilizes a mockup for a service call (retrieving location data from a web SQL database). Below is the controller code: .controller('LocationDetailCtrl', function ($scope, $s ...

javascriptangularjstestingjasminekarma-runner

AJAX does not support functioning links

I've been experimenting with AJAX on my website, and encountered an issue. When I dynamically add content to the page using container.insertAdjacentHTML('beforeend', thing); everything looks fine. However, when I try to click on the links wi ...

javascripthtmlajax

Using React JS to Bring in a Class Component

I recently created a React component called "TempsAndTime" that I want to integrate into my "App.js" file, but for some reason, it's not working. The component is structured as a class and includes the following code snippet: import React from 'r ...

javascriptreactjsmaterial-ui

A workaround for background-size in Internet Explorer 7

Currently, I am working on a project at this link: Everything seems to be functioning well in Firefox and Chrome, however, I have encountered an issue with the background-size property not being supported in IE7. I heavily rely on this property throughout ...

cssinternet-explorer-7

unable to extract variable from the page via query

Having trouble passing $id to the query in PHP I'm currently working on an inline edit script that requires data from a MySQL query obtained based on the URL parameter ?id=. Even though I am successfully retrieving and displaying the id using $_GET $ ...

javascriptphpmysql