Skip to content

Commit e01dfd1

Browse files
WindRunnerMaxWindRunnerMax
committed
22/01/10
1 parent 0c25d9c commit e01dfd1

4 files changed

Lines changed: 197 additions & 0 deletions

File tree

‎CATALOG.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
# Catalog
22

3+
**2022-01-10**
4+
> 第379题：[蒙层禁止页面滚动的方案](HTML/蒙层禁止页面滚动的方案.md)
5+
6+
<br>
7+
8+
39
**2021-12-21**
410
> 第378题：[Hooks中的useState](React/Hooks中的useState.md)
511

‎HTML/蒙层禁止页面滚动的方案.md‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -269,6 +269,95 @@
269269
</html>
270270
```
271271

272+
### body fixed
273+
目前常用的方案就是该方案了，要阻止页面滚动，可以将其固定在视图中即`position: fixed`，这样它就无法滚动了，当蒙层关闭时再释放，当然还有一些细节要考虑，将页面固定视图后内容会回头最顶端，这里我们需要记录一下用来同步`top`值，这样就可以得到一个兼容移动端与`PC`端的较为完善的方案了，当然对于浏览器的`api`兼容性是使用`document.documentElement.scrollTop`控制还是`window.pageYOffset + window.scrollTo`控制就需要另行适配了。在示例中为了演示弹窗时不会导致视图重置到最顶端，将弹窗按钮移动到了下方。
274+
275+
```html
276+
<!DOCTYPE html>
277+
<html>
278+
<head>
279+
<meta charset="utf-8">
280+
<meta name="viewport" content="width=device-width, initial-scale=1">
281+
<title>蒙层禁止页面滚动的方案</title>
282+
<style type="text/css">
283+
#mask{
284+
position: fixed;
285+
height: 100vh;
286+
width: 100vw;
287+
background: rgba(0, 0, 0, 0.6);
288+
top: 0;
289+
left: 0;
290+
display: flex;
291+
align-items: center;
292+
justify-content: center;
293+
}
294+
.hide{
295+
display: none !important;
296+
}
297+
.long-content > div{
298+
height: 300px;
299+
}
300+
.mask-content{
301+
width: 300px;
302+
height: 100px;
303+
overflow-x: auto;
304+
background: #fff;
305+
}
306+
.mask-content > div{
307+
height: 300px;
308+
}
309+
</style>
310+
</head>
311+
<body>
312+
<div class="long-content">
313+
<div>long content</div>
314+
<div>long content</div>
315+
<div>long content</div>
316+
<button id="btn">弹窗</button>
317+
<div>long content</div>
318+
<div>long content</div>
319+
<div>long content</div>
320+
<div>long content</div>
321+
</div>
322+
<div id="mask" class="hide">
323+
<div class="mask-content">
324+
<div>mask-content</div>
325+
<div>mask-content</div>
326+
<div>mask-content</div>
327+
<div>mask-content</div>
328+
<div>mask-content</div>
329+
<div>mask-content</div>
330+
<div>mask-content</div>
331+
<div>mask-content</div>
332+
<div>mask-content</div>
333+
</div>
334+
</div>
335+
</body>
336+
<script type="text/javascript">
337+
(() => {
338+
const btn = document.getElementById("btn");
339+
const mask = document.getElementById("mask");
340+
const body = document.body;
341+
342+
let documentTop = 0; // 记录按下按钮时的 `top`
343+
344+
btn.addEventListener("click", e => {
345+
mask.classList.remove("hide");
346+
documentTop = document.scrollingElement.scrollTop;
347+
body.style.position = "fixed"
348+
body.style.top = -documentTop + "px";
349+
})
350+
mask.addEventListener("click", e => {
351+
mask.classList.add("hide");
352+
body.style.position = "static";
353+
body.style.top = "auto";
354+
document.scrollingElement.scrollTop = documentTop;
355+
})
356+
})();
357+
</script>
358+
</html>
359+
```
360+
272361

273362
## 每日一题
274363

‎JavaScript/Js常见手写题总结.md‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -362,3 +362,104 @@ arr = mergeSort(arr, 0, arr.length - 1, []);
362362
console.log(arr); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
363363
// 平均时间复杂度 O(nlogn) 最好情况 O(nlogn) 最坏情况 O(nlogn) 空间复杂度 O(n) 稳定排序
364364
```
365+
366+
## 最大的第K个数
367+
368+
```javascript
369+
const adjust = (index, arr) => {
370+
let changeIndex = -1;
371+
const n = arr.length;
372+
if(index < n && arr[index] < arr[index * 2 + 1]){
373+
changeIndex = index * 2 + 1;
374+
[arr[index], arr[index * 2 + 1]] = [arr[index * 2 + 1], arr[index]];
375+
}
376+
if(index < n && arr[index] < arr[index * 2 + 2]){
377+
changeIndex = index * 2 + 2;
378+
[arr[index], arr[index * 2 + 2]] = [arr[index * 2 + 2], arr[index]];
379+
}
380+
if(changeIndex !== -1) adjust(changeIndex, arr);
381+
}
382+
383+
const find = (arr, k) => {
384+
for(let n = arr.length, i = n-1; i>=0; --i) adjust(i, arr);
385+
for(let i=0; i<k-1; ++i){
386+
arr.shift();
387+
[arr[0], arr[arr.length - 1]] = [arr[arr.length - 1], arr[0]];
388+
adjust(0, arr);
389+
}
390+
console.log(arr.shift());
391+
}
392+
393+
const k = 3;
394+
const arr = [4, 3, 5, 1, 6, 2, 7, 8];
395+
find(arr, k);
396+
```
397+
398+
## 防抖和节流
399+
400+
```javascript
401+
// 防抖
402+
const d = function(time, funct, ...args){
403+
let timer = null;
404+
return () => {
405+
clearTimeout(timer);
406+
timer = null;
407+
timer = setTimeout(() => funct(...args), time);
408+
}
409+
}
410+
window.onscroll = d(1000, (a) => console.log(a), 1);
411+
```
412+
```javascript
413+
// 节流
414+
const t = function(time, funct, ...args){
415+
let timer = null;
416+
return () => {
417+
if(!timer){
418+
funct(...args);
419+
timer = setTimeout(() => {
420+
clearTimeout(timer);
421+
timer = null;
422+
}, time);
423+
}
424+
}
425+
}
426+
window.onscroll = t(1000, (a) => console.log(a), 1);
427+
428+
```
429+
430+
## 继承
431+
```javascript
432+
// 寄生组合继承
433+
function Parent(from){
434+
this.name = "parent";
435+
this.say = function(){
436+
console.log(this.name);
437+
}
438+
this.from = from;
439+
}
440+
function Child(from){
441+
Parent.call(this, from);
442+
this.name = "child";
443+
}
444+
let f = function(){};
445+
f.prototype = Parent.prototype;
446+
Child.prototype = new f();
447+
Child.prototype.construce = Child;
448+
449+
let child = new Child("child");
450+
child.say(); // child
451+
console.log(child.from); // child
452+
```
453+
454+
## 十进制转二进制
455+
```javascript
456+
(function(num){
457+
num = num >> 0;
458+
const target = [];
459+
while(num){
460+
target.unshift(num % 2);
461+
num = (num / 2) >> 0;
462+
}
463+
console.log(target.join(""));
464+
})(10);
465+
```

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@
3434
* [实现三栏布局](HTML/实现三栏布局.md)
3535
* [Shadow DOM的理解](HTML/Shadow%20DOM的理解.md)
3636
* [Service Worker的应用](HTML/Service%20Worker的应用.md)
37+
* [蒙层禁止页面滚动的方案](HTML/蒙层禁止页面滚动的方案.md)
3738

3839
## CSS
3940
* [布局垂直居中](CSS/布局垂直居中.md)

0 commit comments

Comments
 (0)