我有一個(gè)CSS圖像地圖，我用各種在線教程和幫助頁面把它放在一起(我沒有任何使用CSS的實(shí)際經(jīng)驗(yàn)，所以這對(duì)我來說是相當(dāng)新的)。桌面版本運(yùn)行良好，但我正試圖將其應(yīng)用于移動(dòng)設(shè)備。我發(fā)現(xiàn)了一些JS代碼來調(diào)整圖像地圖和它的坐標(biāo)，但是我現(xiàn)在的問題是當(dāng)標(biāo)簽是& quot點(diǎn)擊& quot(或在手機(jī)上觸摸)不會(huì)滾動(dòng)。試圖用手指滾動(dòng)會(huì)滾動(dòng)背景頁面，但不會(huì)滾動(dòng)彈出窗口本身。有沒有辦法讓彈出窗口可以滾動(dòng)？我試著加上& quot溢出-y:自動(dòng)！重要；"to popup:target，有人建議作為另一個(gè)海報(bào)的解決方案。不過，這在手機(jī)上實(shí)際上沒有任何作用。它確實(shí)在桌面上增加了一個(gè)滾動(dòng)條(這沒有幫助，因?yàn)闆]有一個(gè)彈出窗口大到需要在更大的屏幕上滾動(dòng))。
下面是我正在使用的CSS和HTML，一個(gè)實(shí)時(shí)版本在neweconomynyc.org/resize7.html.。非常感謝任何人能提供的任何幫助。
main {
display: flex;
align-items: left;
justify-content: center;
}
.popup {
padding: 0px;
width: 100%;
background-color: rgba(100, 100, 100, 0.9);
color: white;
font-weight: 300;
font-size: 20px;
opacity: 0;
transform: scale(0);
transition: opacity 300ms, transform 300ms;
position: fixed;
top: 0;
left: 0;
}
.popup > .close {
position: absolute;
right: 6px;
top: 6px;
background-color: red;
padding: 4px 10px;
}
.popup:target {
opacity: 1;
transform: scale(1);
overflow-y: auto !important;
}
div.first {
opacity: 1 !important;
}這是HTML(被截?cái)啵驗(yàn)橥暾拇a有太多的鏈接，所以認(rèn)為它是垃圾郵件):
<!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>CLT Projects in NYC</title>
<link rel="icon" type="image/x-icon" href="https://www.neweconomynyc.org/wp-content/uploads/2019/09/nep-logo-small.jpg">
<link rel="stylesheet" href="basic4.css" />
<link rel="stylesheet" href="mapc.css" />
<style>
body {
background-color: rgb(194,219,215);
}
</style>
</head>
<body>
<main>
<img width="1000" src="https://www.neweconomynyc.org/CLT_Projects_NYC.jpg" usemap="#clts" />
<map name="clts">
<area
alt="Cooper Square CLT"
title="Cooper Square CLT"
href="#coopersquare"
coords="343,379,551,406"
shape="rect"
/>
</map>
<div class="popup" id="coopersquare">
<div><p><img style="margin: 0 25px 30px 0; float: left;" src="https://www.neweconomynyc.org/wp-content/uploads/2023/03/CooperSquare_Map.jpg" width="425" /><h1>Cooper Square CLT</h1>
<hr>
<p><strong>Catchment Area:</strong> Lower East Side, Manhattan<br />
<strong>Website:</strong> <a href="https://www.coopersquareclt.org" target="_blank">coopersquareclt.org</a></p>
<p>Cooper Square CLT has its roots in community organizing efforts that successfully resisted Robert Moses' 1959 urban renewal plan, which would have generated mass displacement on Manhattan's Lower East Side. The Cooper Square Committee defeated the Moses plan and won city approval for a resident-driven plan calling for renovation of buildings instead of new construction, which led to the creation of the Cooper Square CLT and MHA in 1994.</p>
<p>
Together, the CLT and MHA steward and manage some 400 housing units for low and extremely-low income families, as well as 20 commercial units. The Cooper Square Committee, working alone and with the CSCLT, continues to lead community organizing and engagement efforts. In 2019, Cooper Square CLT expanded its portfolio when it acquired two distressed city-owned multifamily buildings ; the CLT is working to renovate the property and develop a democratic, tenant-led decision making structure.</p></div><a class="close" href="#"><strong>X</strong></a>
</div>
</main>
</body>
</html>