如何在我的页面内为左侧菜单添加不同的滚动条
[英]How to add a distinct scroll bar for a left menu inside my page
1 个解决方案
解决方案1
1 已采纳 2019-11-17 02:06:00
在您提供的标记上，您可以设置特定height并添加overflow:auto; 在带有.left的侧边栏上。
请参阅下面的修改并运行代码段。
.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 can I display my page to be visible partially on left when the panel scroll left is enabled?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.