webForumDet fria alternativet
Logga in / Bli medlem

ie-position:fixed hacket och scrollhjul?

HTML & CSS

7 svar · 309 visningar · startad av higa

Medlem sedan aug. 2000359 inlägg
Trådstart#1

Jag hittade för ett tag sedan en sida med ett css-hack för att få en position:fixed liknande effekt i MSIE, men då får jag ett problem med att scrollhjulet på musen inte funkar i Mozilla för att scrolla, utan bara i IE.
Finns det något work-around för det, typ -moz-user-focus-wheel:force (hoppas ni förstår)?

Sidan med hacket finns på http://tom.me.uk/2002/5/ie-position-fixed.html och "content"-divan går inte att scrolla mha hjulet i Mozilla, utan bara genom att dra i scrollbaren.

Medlem sedan feb. 2003774 inlägg
#2

Tyvärr är inte det här implementerat i Mozilla ännu.
Varför inte ta bort overflow:hidden; på body taggen o ha ta bort content divven o ha innehållet i bodyn istället? Då kommer mousewheel att fungera.

Medlem sedan juni 20004 308 inlägg
#3

Skulle tippa på att för då blir den gula menyn att ligga kvar på toppen av sidan när du scrollar ner. Detta kan man fixa med javascript som kontinuerligt flyttar med menyn, men det kommer att "hoppa" lite, och då tappar man meningen med detta "hack".

Medlem sedan aug. 2000359 inlägg
#4

Jag prövade att ta bort overflow:hidden på body och ta bort content divan, men då ligger inte menyn fast. Och då kan man ju lika gärna köra med typ

body div[class="meny"] {position:fixed}
.meny {position:absolute}

så blir den iaf fast i webbläsare som klarar position:fixed.
Vad är isåfall minst irriterande, att skrollhjulet inte funkar i Mozilla (som med hacket) eller att menyer inte ligger fast i äldre browsers som inte klarar position:fixed?

Medlem sedan feb. 2003774 inlägg
#5

Det här hacket får dessutom Opera 7.1 (som stöder position:fixed;) att hänga sig...

Medlem sedan aug. 2000359 inlägg
#6

Puh, lyckades greja så att det funkar i både Mozilla, Opera 7 och MSIE nu, genom att använda CSS2 selectors för att cansla hacket och köra med position:fixed för moderna browsers och använda IE extensions (overflow-x, overflow-y) för att bara IE skulle sätta overflow på html eftersom jag inte kom på hur man skulle kunna använda en CSS2 selector för att nå just <html>
Utan overflow på <html> ser det ut som ett tarmframfall i MSIE, men overflowen förstår för alla andra läsare :)

Medlem sedan feb. 2003774 inlägg
#7

Higa, kan inte du posta koden o dela med dig?

Medlem sedan aug. 2000359 inlägg
#8

Visst, här är en strippad variant:

html, body {overflow-x: hidden; overflow-y:hidden;padding: 0px; margin: 0px; height: 100%; -nsdap:no}
body         {width: 100%;background: url('../bilder/bakgrund.gif') #B5DAFE fixed;}

/* Environment */
.head, .menu, .content, .headmenu { position: absolute; -nsdap:no}
div[class="head"], div[class="menu"], div[class="headmenu"] {position:fixed}

.head .logo {float: left;margin-left: 110px; border: none; -nsdap:no}

div.content {	left: 0px; top: 0px;	 height: 100%; width:100%; overflow: auto; -nsdap: yes;}
body > div[class="content"] {overflow:visible; left: 123px; top: 97px; right: 0px; width:auto;}
#padder { border-top-width: 1px}
#padder {padding: 101px 4px 4px 127px; margin: 0px; width: auto; max-width: 500px; -nsdap:no}
div[class="content"] > div#padder {padding: 4px;}
/* left: 123px; top: 97px; */
div.head 
{
	top: 0px; left: 0px; width: 100%;	height: 74px; background: url('../bilder/brick.gif') #F04024 0px 0px; 
	z-index:10;-nsdap:no
}
div.headmenu {width: 218px; float: right;z-index: 16; right:0px; top: 0px; -nsdap:no;}
div.menu
{
	top: 0px; left: 0px; height: 100%;width: 107px;
	background: url('../bilder/brick.gif') #F04024 20px 0px;
	z-index: 11; overflow: hidden;-nsdap:no; 
}
260 ms totalt · 4 externa anrop · v20260731065814-full.51f67c91
125 ms — deklarationer (db)
0 ms — hämta statistik (cache)
131 ms — hämta tråd, inlägg och bilagor (db)
125 ms — ändringar (db)