Issues with scrolling, styling in css, and Vue challenges

I'm a beginner in this topic, currently working with Vue and CSS. I've managed to create a responsive menu, but I'm facing difficulty in implementing scroll only for the drop-down menu.

The issue I'm encountering is that when I scroll, the entire page moves instead of just the menu dropping down. This behavior is not what I want. I want only the menu to scroll without affecting the rest of the page.

https://i.sstatic.net/0SMjo.png

As shown in the image above, I specifically want to enable scrolling within the red rectangle (Menu). I've searched online for solutions but haven't been successful in making it work.

@media (max-width: 828px) {
    #menu-header.show {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }
    #accordion-mbl-menu {
        margin: 0;
        .panel {
            // CSS rules here
        }
    }
    .login-section {
        // More CSS styles
        }
    }
}

Here's my Vue code:

<div id="menu-mobile-cats" class="scrollbar-outer scroll-content scroll-scrolly_visible">
    <div class="panel-group" id="accordion-mbl-menu">
      <div class="panel">
        // HTML structure here
      </div>
    </div>
</div>

If anyone could provide an example or assist me in resolving this issue, it would be greatly appreciated. As mentioned earlier, I am still learning and would benefit from some guidance on this matter.

cssvue.js

Answer №1

Apply {overflow-y: scroll;} to the parent element of the list and specify a certain height.
Experiment with the var times to easily add or remove li elements for testing purposes.
The scrollbar is currently hidden - you can customize its appearance to better suit smaller devices.

// locate the list
var list = document.getElementById("list");
// Array designed to store HTML output
var output = [];
// Modify "li" elements for testing
var times = 15;

for (let x = 0; x < times; x++){
  let item = `<li><a href="#">Text</a></li>`;
  output.push(item);
}

list.innerHTML = output.join('');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.wrapper {
  border: 1px solid;
  width: 200px;
  height: 300px;
  margin: 20px auto;
  overflow-y: scroll;
}

.wrapper > ul {
  list-style-type: none;
}

.wrapper::-webkit-scrollbar {
  width: 10px;
}

.wrapper > ul > li {
  border-bottom: 1px solid;
  height: 40px;
}
<div class="wrapper">
  <ul id="list"></ul>
</div>

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

Creating a gradient effect using Three.js ShaderMaterial for transparency can be achieved through the manipulation

Is there a way to create a two-color gradient that is transparent? The image below illustrates what I'm trying to achieve. https://i.sstatic.net/IIq3g.png The mesh on the left represents the final result, while the single face on the right shows wha ...

vue.jsthree.jsfragment-shadervertex-shader

Utilizing CSS to incorporate percentage points

Currently, I am facing a challenge in implementing a vertical line with percentage marks. It needs to be positioned relative to the percentage bar, just like how it appears in the screenshot below: https://i.stack.imgur.com/CNWUV.png I attempted a basic ...

htmlcssflexbox

Are there alternative methods to retrieve the CSS properties of web elements more effectively than relying on selenium?

I have a situation in my code where I need to retrieve the CSS properties of a large number of web elements. Currently, I am using Selenium and the code looks like this: ... node = browser.find_element_by_xpath(xpath_to_node) return {k: node.v ...

pythonjquerycssseleniumautomated-tests

Tips for using CSS to adjust the width of a parent element based on the width of an image

I'm currently working on developing my own lightbox using React, and I am looking to adjust the width of a div with the class .lightbox-active based on the width of the image it contains. Right now, I have set the parent element to have a max-width: 5 ...

htmlcssreactjs

Having difficulty reaching elements within a shadow frame using Selenium in Java

I am encountering an issue while trying to access an element within a shadow iframe. I am able to switch to the frame successfully, but when attempting to access elements inside it, I am getting a Stale Element Exception. Any assistance with this would be ...

javascriptjavahtmlcssselenium

Comparing CSS rules: the faster option between specifying multiple IDs or not

Recently, I have been heavily involved in working with Concrete5. It has come to my attention that the default theme contains numerous CSS rules that are defined in this manner: #page #central #sidebar p{line-height:24px} Considering that "sidebar" is an ...

cssperformancedomcss-selectors

Trigger fixed element to appear/disappear when scrolling using JavaScript

I've tried multiple solutions, but I can't seem to get this functionality to work properly on my website. I'm attempting to create a "schedule a demo" button similar to the one on www.bamboohr.com Currently, I have the following html, css, ...

javascriptjquerycssshow-hide

Tips for notifying a user about leaving a page without saving their information

I created a small table where users can input product names and numbers. My question is, how can I notify the user if they try to leave the page without saving the entered information? <form action="index.php" method="post"> <input type="text" ...

javascriptjquerycsshtml

Exploring Vue 3's Dynamic Placeholder Feature with a Global Component

I am attempting to customize the text in the search bar's placeholder attribute dynamically based on the current page. I intend to specify different text for the search bar depending on the page, and I plan to define this text in data(). Unfortunatel ...

vue.jsvuejs3

SSR not working properly in Nuxt 3

Currently facing an issue where I am unable to access my private environment variables. I understand that I can only retrieve them when my page is server-side rendered (SSR). Strangely, even though I have never disabled SSR, when I log console.log(process. ...

javascriptvue.jsnuxt.jsserver-side-rendering

Tips for achieving a stable Vuetify configuration

Working on a project using vue 2 and vuetify, initially everything was going smoothly. However, after some usage, I encountered the following error: Module not found: Error: Can't resolve 'vuetify/src/stylus/app.styl' in '/Users/marce ...

vue.jsvuetify.js

Is it possible for me to include &x&y&z in my Sass code?

When working with Sass, I have the following code: asdf{ &-b&-c {font-size: 16px;} } And I want the generated CSS to look like this: asdf.asdf-b.asdf-c{ font-size: 16px; } Is it possible to achieve this in Sass without having to repeat th ...

csssass

Tips on how to center an image within a table cell:1. Insert the image

I've been attempting to center an image within a bootstrap4 table cell, but it keeps appearing on the left and even overlaps the border. I've tried adding inline styles like text-align: center; vertical-align: middle; both to the table cell HTML ...

htmlcssbootstrap-4

What is the function of object-fit when used with the canvas element?

Despite my thorough search, I have not come across any documentation to clarify this issue. Is it possible to use object-fit cover on canvas elements? My experiments have yielded unexpected results so far. Could someone provide me with a conclusive answe ...

csshtmlhtml5-canvasobject-fit

Combining two containers in CSS

I am currently working on building a website design, and I have a menu positioned on the right side of the layout. Below is the code for the menu along with an explanation. #rightmenu { border-top: 1px solid #000000; border-right: 1px solid #00000 ...

csspositionpositioninghtml

An issue arises in import-quasar.js with 3 errors being thrown by Quasar following the execution of the qu

After running the quasar dev mat command, I encountered the following error message. This occurred on a newly installed system right after completing the steps below: -Autoimport option -cd project-name -npm i -quasar dev mat Can anyone provide assi ...

vue.jsvuexquasar-frameworkquasar

The computed property in Vue JS is providing an unexpected output

I need assistance with a task in Vue JS that I'm struggling with. I can't seem to figure out what's causing the issue in this code. The task involves creating a dynamic table with 5 columns, each with a background color of red, blue, yellow ...

vue.jscomputed-properties

Narrow down your search results with date range filtering in Angular Material

Seeking guidance as a newcomer to Angular Material, I am trying to implement a date range filter for a table of N results. The options in the filter select are (1 day, 5 days, 1 week, 15 days), which are populated using a variable JS vm.rangos=[ {id ...

angularjshtmlcssangular

What causes the error message "Irregular whitespace not permitted" and what are the solutions?

After using two <p> tags as shown in the code below, I encountered an error: "Irregular whitespace not allowed no-irregular-whitespace". How can I resolve this issue? <div> <p>Ankjjdhd asas a sds qwe vsdf fsf ewth lioy nfhfgh&l ...

vue.jsvuejs2vue-componentvuexvuetify.js

How can I use CSS to clip the United States, specifically Tennessee and Nashville, from the left side?

For my ASP.NET generated hyperlink that says "select location", when the user clicks on it, they are redirected to a new page where they can choose a different location at /change-location/default.aspx. This could be any country, state, or city in the worl ...

htmlcssasp.net