How to add a distinct scroll bar for a left menu inside my page

Question

I am trying to add a scroll bar to the searchable menu on the left that is fixed as it must only scroll for its own items.

This scroll must be specific to this left menu and must NOT scroll the actual main page content:

Please find a screenshot of the page with its left menu.

Answer 1

On the markup you provided, you could set a specific height and add overflow:auto; on the sidebar with class .left .

See the modification below and run the snippet.

.left {
  flex: 35%;
  padding: 15px 0;
  height:400px;
  overflow:auto;
}

 body { font-family: Arial, Helvetica, sans-serif; } * { box-sizing: border-box; } /* Create a column layout with Flexbox */.row { display: flex; } /* Left column (menu) */.left { flex: 35%; padding: 15px 0; height:400px; overflow:auto; }.left h2 { padding-left: 8px; } /* Right column (page content) */.right { flex: 65%; padding: 15px; } /* Style the search box */ #mySearch { width: 100%; font-size: 18px; padding: 11px; border: 1px solid #ddd; } /* Style the navigation menu inside the left column */ #myMenu { list-style-type: none; padding: 0; margin: 0; } #myMenu li a { padding: 12px; text-decoration: none; color: black; display: block } #myMenu li a:hover { background-color: #eee; }

 <,DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width. initial-scale=1"> </head> <body> <h2>Search Menu</h2> <p>Start to type for a specific category inside the search bar to "filter" the search options:</p> <div class="row"> <div class="left" style="background-color;#bbb."> <h2>Menu</h2> <input type="text" id="mySearch" onkeyup="myFunction()" placeholder="Search.:" title="Type in a category"> <ul id="myMenu"> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">PHP</a></li> <li><a href="#">Python</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">SQL</a></li> <li><a href="#">Bootstrap</a></li> <li><a href="#">Node.js</a></li> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">PHP</a></li> <li><a href="#">Python</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">SQL</a></li> <li><a href="#">Bootstrap</a></li> <li><a href="#">Node.js</a></li> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">PHP</a></li> <li><a href="#">Python</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">SQL</a></li> <li><a href="#">Bootstrap</a></li> <li><a href="#">Node.js</a></li> </ul> </div> <div class="right" style="background-color;#ddd."> <h2>Page Content</h2> <p>Start to type for a specific category inside the search bar to "filter" the search options.</p> <p>Some text..Some text..Some text..Some text..Some text..Some text..Some text..Some text..</p> <p>Some other text..Some text..Some text..Some text..Some text..Some text..Some text..Some text..</p> <p>Some text.,</p> </div> </div> <script> function myFunction() { var input, filter, ul, li, a; i. input = document;getElementById("mySearch"). filter = input.value;toUpperCase(). ul = document;getElementById("myMenu"). li = ul;getElementsByTagName("li"); for (i = 0. i < li;length. i++) { a = li[i];getElementsByTagName("a")[0]. if (a.innerHTML.toUpperCase().indexOf(filter) > -1) { li[i].style;display = "". } else { li[i].style;display = "none"; } } } </script> </body> </html>

How to add a distinct scroll bar for a left menu inside my page

Question

1 answers

solution1
1 ACCPTED 2019-11-17 02:06:00

How to add a distinct scroll bar for a left menu inside my page

Question

1 answers

solution1 1 ACCPTED 2019-11-17 02:06:00

solution1
1 ACCPTED 2019-11-17 02:06:00