Comment désactiver le défilement de la page inférieure de la fenêtre contextuelle

Lorsque nous créons tous des calques contextuels, un élément essentiel est le calque de masque, qui est le calque de masque. Lorsque le calque contextuel défile, la page en bas du calque de masque doit généralement être corrigée, donc cet article vous présentera plusieurs méthodes pour désactiver le défilement de la page inférieure du calque de masque dans la fenêtre contextuelle. Les amis dans le besoin peuvent s'y référer.

Aperçu du scénario

Comme nous le savons tous, les fenêtres contextuelles sont une méthode d'interaction courante et le masque est un élément essentiel de la pop -fenêtres pop-up Il est utilisé pour séparer la page du bloc pop-up et bloquer temporairement l'interaction de la page. Cependant, lorsque vous glissez dans l'élément masqué, lorsque vous glissez jusqu'à la fin du contenu, puis continuez à glisser, la page en bas du calque masqué commencera à défiler. Évidemment, ce n'est pas l'effet souhaité, donc ceci. il faut prévenir ce comportement.

Alors, comment l'arrêter ? Veuillez consulter l'analyse suivante :

Analyse du plan

Plan 1

Lorsque la couche de masquage est activé, Ajouter des styles au corps :

overflow: hidden;
height: 100%;

Dans certains modèles, vous devrez peut-être également ajouter des styles au nœud racine :

overflow: hidden;

Lorsque le masque est désactivé , supprimez les styles ci-dessus.

Avantages :

Simple et pratique, ajoutez simplement du style CSS, pas de logique compliquée.

Inconvénients :

La compatibilité n'est pas bonne, elle convient au PC, mais la version mobile est gênante.

Sur certains modèles Android et Safari, il est impossible d'empêcher le défilement de la page du bas.

Si vous devez l'appliquer au terminal mobile, vous aurez peut-être besoin de l'option 2.

Option 2

Est d'utiliser l'événement tactile du côté mobile

L'objet tactile représente un point de contact, qui peut être transmis event.touches [0] Get, chaque contact contient les attributs de position, de taille, de forme, de taille de pression et d'élément cible.

{
screenX: 511, 
screenY: 400,//触点相对于屏幕左边沿的Y坐标
clientX: 244.37899780273438, 
clientY: 189.3820037841797,//相对于可视区域
pageX: 244.37, 
pageY: 189.37,//相对于HTML文档顶部，当页面有滚动的时候与clientX=Y 不等
force: 1,//压力大小，是从0.0(没有压力)到1.0(最大压力)的浮点数
identifier: 1036403715,//一次触摸动作的唯一标识符
radiusX: 37.565673828125, //能够包围用户和触摸平面的接触面的最小椭圆的水平轴(X轴)半径
radiusY: 37.565673828125,
rotationAngle: 0,//它是这样一个角度值：由radiusX 和 radiusY 描述的正方向的椭圆，需要通过顺时针旋转这个角度值，才能最精确地覆盖住用户和触摸平面的接触面
target: {} // 此次触摸事件的目标element
}

Utilisez l'événement tactile côté mobile pour empêcher le comportement par défaut (ici, on peut comprendre que le défilement des pages est le comportement par défaut).

// node为蒙层容器dom节点
node.addEventListener('touchstart', e => {
 e.preventDefault()
}, false)

Simple et grossier, la page du bas ne peut pas bouger lors du défilement. Si votre contenu masqué n'a pas de barres de défilement, alors la méthode ci-dessus est parfaite.

Cependant, le plus effrayant est que l'air devient soudainement calme. Si le contenu du calque de masque comporte une barre de défilement, il ne pourra plus bouger. Par conséquent, nous devons écrire une logique js pour déterminer s'il faut empêcher le comportement par défaut, ce qui augmente considérablement la complexité.

Idée spécifique : Déterminez si le contenu masqué a défilé jusqu'à la fin. Si c'est le cas, empêchez le comportement par défaut, sinon laissez-le se dérouler.

Astuce : Ici, j'ai trouvé une petite astuce qui peut omettre beaucoup de code. Lors d'une diapositive, si le contenu masqué peut défiler, le contenu masqué défilera même si le contenu masqué a défilé jusqu'au bout, tant que vous ne le lâchez pas (ce qui peut être compris comme avant le déclenchement de l'événement touchend). ), le contenu de la page ne défilera pas lorsque vous continuez à glisser, si vous lâchez prise et continuez le défilement, le contenu de la page défilera. Grâce à cette petite astuce, nous pouvons rationaliser et optimiser notre logique de code.

L'exemple de code est le suivant :

<body>
 <p class="page">
 <!-- 这里多添加一些，直至出现滚动条 -->
 <p>页面</p>
 <p>页面</p>
 <button class="btn">打开蒙层</button>
 <p>页面</p>
 </p>
 <p class="container">
 <p class="layer"></p>
 <p class="content">
  <!-- 这里多添加一些，直至出现滚动条 -->
  <p>蒙层</p>
  <p>蒙层</p>
  <p>蒙层</p>
 </p>
 </p>
</body>

body {
 margin: 0;
 padding: 20px;
}

.btn {
 border: none;
 outline: none;
 font-size: inherit;
 border-radius: 4px;
 padding: 1em;
 width: 100%;
 margin: 1em 0;
 color: #fff;
 background-color: #ff5777;
}

.container {
 position: fixed;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
 z-index: 1001;
 display: none;
}

.layer {
 position: absolute;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
 z-index: 1;
 background-color: rgba(0, 0, 0, .3);
}

.content {
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 height: 50%;
 z-index: 2;
 background-color: #f6f6f6;
 overflow-y: auto;
}

const btnNode = document.querySelector('.btn')
const containerNode = document.querySelector('.container')
const layerNode = document.querySelector('.layer')
const contentNode = document.querySelector('.content')
let startY = 0 // 记录开始滑动的坐标，用于判断滑动方向
let status = 0 // 0：未开始，1：已开始，2：滑动中

// 打开蒙层
btnNode.addEventListener('click', () => {
 containerNode.style.display = 'block'
}, false)

// 蒙层部分始终阻止默认行为
layerNode.addEventListener('touchstart', e => {
 e.preventDefault()
}, false)

// 核心部分
contentNode.addEventListener('touchstart', e => {
 status = 1
 startY = e.targetTouches[0].pageY
}, false)

contentNode.addEventListener('touchmove', e => {
 // 判定一次就够了
 if (status !== 1) return

 status = 2

 let t = e.target || e.srcElement
 let py = e.targetTouches[0].pageY
 let ch = t.clientHeight // 内容可视高度
 let sh = t.scrollHeight // 内容滚动高度
 let st = t.scrollTop // 当前滚动高度

 // 已经到头部尽头了还要向上滑动，阻止它
 if (st === 0 && startY < py) {
 e.preventDefault()
 }

 // 已经到低部尽头了还要向下滑动，阻止它
 if ((st === sh - ch) && startY > py) {
 e.preventDefault()
 }
}, false)

contentNode.addEventListener(&#39;touchend&#39;, e => {
 status = 0
}, false)

Bien que le problème ait été résolu, avec le recul, la complexité et le volume du code ont évidemment augmenté progressivement.

Sur la base du principe de simplicité et de commodité, peut-on explorer d'autres solutions ?

La détermination des événements tactiles étant plus compliquée, pourquoi ne pas sortir de cette boîte, trouver un autre moyen et explorer une solution plus adaptée.

Donc, nous avons notre plan trois.

Option 3

Laissez-moi parler de mon idée Puisque nous voulons empêcher le défilement de la page, pourquoi ne pas la corriger dans la fenêtre (c'est-à-dire position : fixe) , de sorte qu'il ne sera plus défilable et sera libéré lorsque le masque sera fermé.

position : corrigée Je n'ai pas besoin de trop vous présenter. Pour une introduction détaillée, vous pouvez vous référer à cet article : //www.jb51.net/article/83175.htm

Bien sûr, il y a quelques détails à prendre en compte. Après avoir corrigé la fenêtre de la page, le contenu reviendra en haut. Ici, nous devons l'enregistrer et synchroniser la valeur supérieure.

Exemple de code :

let bodyEl = document.body
let top = 0

function stopBodyScroll (isFixed) {
 if (isFixed) {
 top = window.scrollY

 bodyEl.style.position = 'fixed'
 bodyEl.style.top = -top + 'px'
 } else {
 bodyEl.style.position = ''
 bodyEl.style.top = ''

 window.scrollTo(0, top) // 回到原先的top
 }
}

Résumé de réflexion

• Si le scénario d'application est PC, la première solution recommandée est vraiment Ce n'est pas très pratique

• Si le scénario d'application est h5, vous pouvez utiliser l'option deux, mais je vous recommande d'adopter l'option trois

• Si le Le scénario d'application est qu'il s'agit d'une plate-forme complète, vous ne devriez donc pas manquer l'option trois

Cet article est sur le point de se terminer ici. Ici, je recommande fortement l'option trois car elle est simple, pratique et. a une bonne compatibilité. Encapsulé pour une utilisation permanente.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles associés :

À propos des principes de réactivité dans Vue (tutoriel détaillé)

Comment implémenter le chargement dynamique de graphiques à barres dans AngularJS

Comment utiliser la portée dans la portée angulaire

Comment utiliser React pour implémenter le contrôle des autorisations de menu

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!