Web实现：页面横向滚动

编程入门行业动态更新时间:2024-10-27 08:25:59

Web实现：页面<a href=https://www.elefans.com/category/jswz/34/1768009.html style= 横向滚动"/>

Web实现：页面横向滚动

实现效果：根据页面宽度，当页面宽度超出内容时，页面禁止横向滚动，页面宽度小于内容时，页面横向滚动。根据页面的不同宽度，字体大小也会相应变化。
HTML部分：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>移动端问吧首页</title><link rel="stylesheet" href="./index.css"></head><body><header class="header"><div class="search-bar"><input type="text" class="search" placeholder="搜一搜" /><span class="search-icon"></span></div><div class="options"><button class="btn-scan"></button><button class="btn-mail"></button></div></header><section class="banner"><img src="./images/banner.jpg" alt="" /></section><section class="post-group"><div class="info"><span class="txt">关注了2个圈子</span><button class="btn-more"><span>查看全部圈子</span><span class="arrow-right-icon"></span></button></div><div class="dashed"></div><ul class="groups"><li class="group"><img src="./images/java.png" alt="" /><div class="txt">JAVA</div></li><li class="group"><img src="./images/h5.png" alt="" /><div class="txt">前端</div></li><li class="group"><img src="./images/java.png" alt="" /><div class="txt">JAVA</div></li><li class="group"><img src="./images/h5.png" alt="" /><div class="txt">前端</div></li><li class="group"><img src="./images/java.png" alt="" /><div class="txt">JAVA</div></li><li class="group"><img src="./images/h5.png" alt="" /><div class="txt">前端</div></li><li class="group"><img src="./images/java.png" alt="" /><div class="txt">JAVA</div></li><li class="group"><img src="./images/h5.png" alt="" /><div class="txt">前端</div></li></ul></section></body>
</html>

CSS部分：

html,
body {height: 100%;margin: 0; }ul,
li {margin: 0;padding: 0; }li {list-style: none; }h1,
h2 {margin: 0; }p {margin: 0;padding: 0; }@media screen and (max-width: 768px) {html {font-size: 20px; } }@media screen and (max-width: 320px) {html {font-size: 17.0666666667px; } }.btn, .post-group .info .btn-more, header.header .options .btn-mail, header.header .options .btn-scan {padding: 0;border: none;background: transparent;cursor: pointer; }.btn:focus, .post-group .info .btn-more:focus, header.header .options .btn-mail:focus, header.header .options .btn-scan:focus {outline: none; }body {max-width: 768px;margin: 0 auto; }header.header {max-width: 768px;margin: 0 auto;height: 2.675rem;box-sizing: border-box;padding: 0 0.75rem 0.75rem;display: flex;align-items: flex-end;background: #fff;position: fixed;top: 0;left: 0;right: 0; }header.header .search-bar {height: 1.5rem;flex: 1;position: relative;margin-right: 0.825rem;font-size: 0; }header.header .search-bar .search {width: 100%;height: 100%;box-sizing: border-box;background: #f2f2f2;border-radius: 1.5rem;border: none;padding: 0 0.5rem 0 1.85rem;box-sizing: border-box; }header.header .search-bar .search:focus {outline: none; }header.header .search-bar ::placeholder {font-size: 0.65rem;color: #999999; }header.header .search-bar .search-icon {width: 0.85rem;height: 0.85rem;background: url(./images/search.png) no-repeat center/contain;position: absolute;top: 0.325rem;left: 0.5rem; }header.header .options {height: 1.5rem;flex: none;height: 1.5rem;display: flex;align-items: center; }header.header .options .btn-scan {width: 0.95rem;height: 0.95rem;background: url(./images/scan.png) no-repeat center/contain;margin-right: 0.75rem; }header.header .options .btn-mail {width: 1.05rem;height: 1.05rem;background: url(./images/mail.png) no-repeat center/contain; }.banner {margin: 2.675rem 0.75rem 0; }.banner img {width: 100%; }.post-group {padding: 0 0.75rem; }.post-group .info {height: 2.4rem;box-sizing: border-box;padding-top: 0.25rem;display: flex;align-items: center;justify-content: space-between; }.post-group .info .txt {font-weight: 500;font-size: 0.8rem;color: #333333; }.post-group .info .btn-more {display: flex;align-items: center;font-size: 0.7rem;color: #3492FD; }.post-group .info .btn-more .arrow-right-icon {width: 0.275rem;height: 0.525rem;margin-left: 0.5rem;background: url(./images/arrow-right.png) no-repeat center/contain; }.post-group .groups {height: 4.5rem;display: flex;overflow: auto;-webkit-overflow-scrolling: touch;padding-left: 0.05rem;border-top: 1px dashed #E5E5E5; }.post-group .groups .group {min-width: 2.8rem;height: 3.5rem;box-sizing: border-box;text-align: center;padding-top: 0.375rem;margin-right: 1.25rem; }.post-group .groups .group > img {width: 2.25rem;height: 2.25rem;margin-bottom: 0.25rem; }.post-group .groups .group .txt {font-size: 0.7rem;color: #000000; }