如何在我的页面内为左侧菜单添加不同的滚动条

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;在您提供的标记上，您可以设置特定height并添加overflow:auto; on the sidebar with class .left .在带有.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>

如何在我的页面内为左侧菜单添加不同的滚动条

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-11-17 02:06:00

如何在我的页面内为左侧菜单添加不同的滚动条

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-11-17 02:06:00

解决方案1
1 已采纳 2019-11-17 02:06:00