需要滚动到位：固定;

I managed to make this code to work for me, i'm not a webdesigner and i got little knowledge.

我设法让这个代码为我工作,我不是一个webdesigner,我知道的很少。

I finaly got my site working as it should, except for the scrolling function, the page should be able to scroll verticaly, when i change "position: fixed;" to "position: scroll;" i get the scrollbar but it also gives me white borders around the image and the image map coords will not work anymore..

我最终得到了我的网站应该工作,除了滚动功能,当我改变“position:fixed”时,页面应该能够垂直滚动。到“位置:滚动;”我得到滚动条但它也给了我图像周围的白色边框,图像地图坐标将不再工作..

Sorry for any grammatical mistakes

对不起任何语法错误

Many thanks!

<html>
<head>
<meta charset="utf-8"/>
<title>Rolling Barrel :: Sport & Game</title>
<style>
div {
    width: 100%;
}

img[usemap] {
        border: none; height: auto; max-width: 100%; width: auto;
}

#background {
    position: fixed; top: 0; left: 0; min-width: 100%; min-height: 100%;
}
</style>
</head>
<body>
<div>
<img src="background.jpg" id="background" width="1920" height="1080" usemap="#imagemap"/>
<map name="imagemap">
<area shape="rect" coords="45,35,178,93" href="/nieuw/home"/>
<area shape="rect" coords="193,35,337,93" href="/nieuw/nieuws"/>
<area shape="rect" coords="353,35,606,93" href="/nieuw/evenementen"/>
<area shape="rect" coords="622,35,895,93" href="/nieuw/beeldmateriaal"/>
<area shape="rect" coords="913,35,1066,93" href="/nieuw/contact"/>
<area shape="rect" coords="1082,35,1238,93" href="/nieuw/verhuur"/>
<area shape="rect" coords="1253,35,1422,93" href="/nieuw/zakelijk"/>
<area shape="rect" coords="1437,35,1882,93" href="/nieuw/rolling-barrel-centers"/>
</map>
</div>
<script src="jquery/1.js"></script>
<script src="jquery/2.js"></script>
<script>
$(document).ready(function(e) {
    $('img[usemap]').rwdImageMaps();
});
</script>
</body>
</html>

1 个解决方案

#1

Though you may have backed yourself into a corner with position fixed, technically what you want is to set the fixed element to the 100% height and width of the screen, and give it overflow: scroll.

虽然您可能已将自己支撑到一个位置固定的角落,但从技术上讲,您想要将固定元素设置为屏幕的100%高度和宽度,并将其溢出:滚动。

This sets the containing element as the size of the screen, and says to scroll all the content within it.

这将包含元素设置为屏幕的大小,并表示滚动其中的所有内容。

#1