移动前端应用开发_弹层出现时禁止页面滚动

前端开发1期视频教程|延吉web前端开发招聘|web前端开发昆明招聘

查了下网上最好的方法是给 body 加 height: 100%; overflow: hidden; ,加上发现没有生效,又发现需要加 position: fixed; ,加上后确实可以禁止滚动,但是页面会回到页首。

然后就想着禁止后滚到禁止前滚动到的位置,但是页面滚动 IE、新版chrome 和 火狐 是 document.documentElement.scrollTop 生效,而不是 body.scrollTop 生效,body高已经为屏幕高了,html不能滚动。然后就把 height: 100%; overflow: hidden; 加到了 html 上,就可以设置 scrollTop 了,测试最起码可以兼容到IE7。

但是 老版本chrome 是 body.scrollTop 滚动页面,所以我就加了个 #container 的最外层的盒子来承担这个实现页面滚动的任务,以确保所有的浏览器都可以完美的兼容。

优点:

至少可以兼容到ie7,pc、移动、响应式页面都可以用,弹层内容可以滚动,js逻辑较少。

缺点:

需要考虑布局,不需要满足上述所有需求的可以换更简单的方法。

希望对有需要的同学会有所帮助。

html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
<metaname=”viewport”content=”width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no minimal-ui”>
<metacharset=”UTF-8″>
<title>Document</title>
<style>
* {
margin:0;
padding:0;
}
html,
body {
width:100%;
height:100%;
overflow:hidden;
}
#container {
width:100%;
height:100%;
overflow-y:scroll;
text-align:center;
}
#container.overflow {
overflow:hidden;
}
#alert {
position:fixed;
left:0;
top:0;
z-index:999;
width:100%;
height:100%;
background:rgba(0,0,0,.6);
}
#alert>div {
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
margin:auto;
width:250px;
height:200px;
background:#fff;
border:15pxsolid#fff;
border-radius:10px;
overflow-y:scroll;
}
button {
width:150px;
height:50px;
}
</style>
</head>
<body>
<divid=”container”>
<ul>
<li>001</li>
<li>002</li>
<li>003</li>
<li>004</li>
<li>005</li>
<li>006</li>
<li>007</li>
<li>008</li>
<li>009</li>
<li>010</li>
<li>011</li>
<li>012</li>
<li>013</li>
<li>014</li>
<li>015</li>
<li>016</li>
<li>017</li>
<li>018</li>
<li>019</li>
<li>020</li>
<li>021</li>
<li>022</li>
<li>023</li>
<li>024</li>
<li>025</li>
<li>026</li>
<li>027</li>
<li>028</li>
<li>029</li>
<li>030</li>
<li>031</li>
<li>032</li>
<li>033</li>
<li>034</li>
<li>035</li>
<li>036</li>
<li>037</li>
<li>038</li>
<li>039</li>
<li>040</li>
<li>041</li>
<li>042</li>
<li>043</li>
<li>044</li>
<li>045</li>
<li>046</li>
<li>047</li>
<li>048</li>
<li>049</li>
<li>050</li>
<li>051</li>
<li>052</li>
<li>053</li>
<li>054</li>
<li>055</li>
<li>056</li>
<li>057</li>
<li>058</li>
<li>059</li>
<li>060</li>
<li>
<buttonid=”btn”>alert</button>
</li>
<li>061</li>
<li>062</li>
<li>063</li>
<li>064</li>
<li>065</li>
<li>066</li>
<li>067</li>
<li>068</li>
<li>069</li>
<li>070</li>
<li>071</li>
<li>072</li>
<li>073</li>
<li>074</li>
<li>075</li>
<li>076</li>
<li>077</li>
<li>078</li>
<li>079</li>
<li>080</li>
<li>081</li>
<li>082</li>
<li>083</li>
<li>084</li>
<li>085</li>
<li>086</li>
<li>087</li>
<li>088</li>
<li>089</li>
<li>090</li>
<li>091</li>
<li>092</li>
<li>093</li>
<li>094</li>
<li>095</li>
<li>096</li>
<li>097</li>
<li>098</li>
<li>099</li>
<li>100</li>
<li>101</li>
<li>102</li>
<li>103</li>
<li>104</li>
<li>105</li>
<li>106</li>
<li>107</li>
<li>108</li>
<li>109</li>
<li>110</li>
<li>111</li>
<li>112</li>
<li>113</li>
<li>114</li>
<li>115</li>
<li>116</li>
<li>117</li>
<li>118</li>
<li>119</li>
<li>120</li>
<li>121</li>
<li>122</li>
<li>123</li>
<li>124</li>
<li>125</li>
<li>126</li>
<li>127</li>
<li>128</li>
<li>129</li>
<li>130</li>
<li>131</li>
<li>132</li>
<li>133</li>
<li>134</li>
<li>135</li>
<li>136</li>
<li>137</li>
<li>138</li>
<li>139</li>
<li>140</li>
<li>141</li>
<li>142</li>
<li>143</li>
<li>144</li>
<li>145</li>
<li>146</li>
<li>147</li>
<li>148</li>
<li>149</li>
<li>150</li>
<li>151</li>
<li>152</li>
<li>153</li>
<li>154</li>
<li>155</li>
<li>156</li>
<li>157</li>
<li>158</li>
<li>159</li>
<li>160</li>
<li>161</li>
<li>162</li>
<li>163</li>
<li>164</li>
<li>165</li>
<li>166</li>
<li>167</li>
<li>168</li>
<li>169</li>
<li>170</li>
<li>171</li>
<li>172</li>
<li>173</li>
<li>174</li>
<li>175</li>
<li>176</li>
<li>177</li>
<li>178</li>
<li>179</li>
<li>180</li>
<li>181</li>
<li>182</li>
<li>183</li>
<li>184</li>
<li>185</li>
<li>186</li>
<li>187</li>
<li>188</li>
<li>189</li>
<li>190</li>
<li>191</li>
<li>192</li>
<li>193</li>
<li>194</li>
<li>195</li>
<li>196</li>
<li>197</li>
<li>198</li>
<li>199</li>
<li>200</li>
<li>201</li>
<li>202</li>
<li>203</li>
<li>204</li>
<li>205</li>
<li>206</li>
<li>207</li>
<li>208</li>
<li>209</li>
<li>210</li>
<li>211</li>
<li>212</li>
<li>213</li>
<li>214</li>
<li>215</li>
<li>216</li>
<li>217</li>
<li>218</li>
<li>219</li>
<li>220</li>
<li>221</li>
<li>222</li>
<li>223</li>
<li>224</li>
<li>225</li>
<li>226</li>
<li>227</li>
<li>228</li>
<li>229</li>
<li>230</li>
<li>231</li>
<li>232</li>
<li>233</li>
<li>234</li>
<li>235</li>
<li>236</li>
<li>237</li>
<li>238</li>
<li>239</li>
<li>240</li>
<li>241</li>
<li>242</li>
<li>243</li>
<li>244</li>
<li>245</li>
<li>246</li>
<li>247</li>
<li>248</li>
<li>249</li>
<li>250</li>
<li>251</li>
<li>252</li>
<li>253</li>
<li>254</li>
<li>255</li>
<li>256</li>
<li>257</li>
<li>258</li>
<li>259</li>
<li>260</li>
<li>261</li>
<li>262</li>
<li>263</li>
<li>264</li>
<li>265</li>
<li>266</li>
<li>267</li>
<li>268</li>
<li>269</li>
<li>270</li>
<li>271</li>
<li>272</li>
<li>273</li>
<li>274</li>
<li>275</li>
<li>276</li>
<li>277</li>
<li>278</li>
<li>279</li>
<li>280</li>
<li>281</li>
<li>282</li>
<li>283</li>
<li>284</li>
<li>285</li>
<li>286</li>
<li>287</li>
<li>288</li>
<li>289</li>
<li>290</li>
<li>291</li>
<li>292</li>
<li>293</li>
<li>294</li>
<li>295</li>
<li>296</li>
<li>297</li>
<li>298</li>
<li>299</li>
<li>300</li>
</ul>
</div>
<divid=”alert”style=”display: none;”>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto distinctio, consequatur facere, asperiores sequi in
vel earum aliquid, perspiciatis ipsum odit explicabo sint rem repellendus magnam commodi temporibus numquam ipsam!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur adipisci sequi saepe, quas esse dicta, placeat
ullam nam a accusamus provident iste in debitis deserunt eveniet quaerat repellendus voluptatibus asperiores!
</div>
</div>
<script>
vara=document.getElementById(‘alert’);
varc=document.getElementById(‘container’);
varbtn=document.getElementById(‘btn’);
btn.onclick=function () {
a.style.display=’block’;
vart=c.scrollTop;
c.classList.add(‘overflow’);
//c.scrollTo(0,t);
c.scrollTop=t;
document.body.style.overflowY=’scroll’;
}
a.onclick=function () {
a.style.display=’none’;
c.classList.remove(‘overflow’);
document.body.style.overflowY=’hidden’;
}
</script>
</body>
</html>

PHP开发前端用框架如何|兄弟连前端开发视频教程下载|ios开发前端框架

» 本文来自:前端开发者 » 《移动前端应用开发_弹层出现时禁止页面滚动》
» 本文链接地址:https://www.rokub.com/5111.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!