So deaktivieren Sie das Scrollen auf der unteren Seite des Popup-Fensters

Wenn wir alle Popup-Ebenen erstellen, ist die Maskenebene ein wesentliches Element. Beim Scrollen der Popup-Ebene muss im Allgemeinen die Seite am unteren Rand der Maskenebene fixiert werden. In diesem Artikel werden Ihnen verschiedene Methoden vorgestellt, wie Sie verhindern können, dass die untere Seite der Maskenebene im Popup-Fenster dem Scrollen folgt. Freunde in Not können darauf verweisen.

Szenarioübersicht

Wie wir alle wissen, sind Popup-Fenster eine gängige Interaktionsmethode und die Maske ist ein wesentliches Element von Pop -up-Fenster werden verwendet, um die Seite vom Popup-Fensterblock zu trennen und die Interaktion der Seite vorübergehend zu blockieren. Wenn Sie jedoch im maskierten Element bis zum Ende des Inhalts gleiten und dann weitergleiten, beginnt die Seite am unteren Rand der maskierten Ebene zu scrollen. Dies ist offensichtlich nicht der gewünschte Effekt Verhalten muss verhindert werden.

Also, wie kann man es stoppen? Bitte sehen Sie sich die folgende Analyse an:

Plananalyse

Plan 1

Wenn die Maskierungsschicht aktiviert ist, fügen Sie dem Körper einen Stil hinzu:

overflow: hidden;
height: 100%;

Bei einigen Modellen müssen Sie möglicherweise auch einen Stil zum Stammknoten hinzufügen:

overflow: hidden;

Wenn Sie die Maske ausschalten, entfernen Sie die oben stil.

Vorteile:

Einfach und bequem, fügen Sie einfach den CSS-Stil hinzu, keine komplizierte Logik.

Nachteile:

Die Kompatibilität ist nicht gut, es ist für den PC geeignet, aber die mobile Version ist umständlich.

Bei einigen Android-Modellen und Safari lässt sich das Scrollen der unteren Seite nicht verhindern.

Wenn Sie es auf dem mobilen Endgerät anwenden müssen, benötigen Sie möglicherweise Option 2.

Option 2

Ist die Verwendung des Berührungsereignisses auf der mobilen Seite

Das Berührungsobjekt stellt einen Berührungspunkt dar, der kann übergeben werden event.touches [0] Holen Sie sich, jeder Kontakt enthält Position, Größe, Form, Druckgröße und Zielelementattribute.

{
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
}

Verwenden Sie das Touch-Ereignis auf der mobilen Seite, um das Standardverhalten zu verhindern (hier kann man verstehen, dass das Scrollen der Seite das Standardverhalten ist).

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

Es ist einfach und grob und die untere Seite kann sich beim Scrollen nicht bewegen. Wenn Ihr maskierter Inhalt keine Bildlaufleisten hat, ist die oben beschriebene Methode perfekt.

Das Beängstigendste ist jedoch, dass die Luft plötzlich still wird. Wenn der Inhalt der Maskenebene eine Bildlaufleiste hat, kann er sich nicht mehr bewegen. Daher müssen wir eine JS-Logik schreiben, um zu bestimmen, ob das Standardverhalten verhindert werden soll, was die Komplexität erheblich erhöht.

Spezifische Idee: Bestimmen Sie, ob der maskierte Inhalt bis zum Ende gescrollt wird. Wenn ja, verhindern Sie das Standardverhalten, andernfalls lassen Sie es ungebremst laufen.

Tipp: Hier habe ich einen kleinen Trick gefunden, mit dem man viel Code weglassen kann. Wenn der maskierte Inhalt während einer Folie gescrollt werden kann, wird der maskierte Inhalt gescrollt, auch wenn der maskierte Inhalt bis zum Ende gescrollt wurde, solange Sie ihn nicht loslassen (was so verstanden werden kann, als ob das Touchend-Ereignis ausgelöst wird). ), wird der Seiteninhalt nicht gescrollt, wenn Sie weitergleiten. Wenn Sie loslassen und weiterscrollen, wird der Seiteninhalt gescrollt. Mit diesem kleinen Trick können wir unsere Codelogik rationalisieren und optimieren.

Der Beispielcode lautet wie folgt:

<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)

Obwohl das Problem gelöst ist, sind rückblickend offensichtlich die Komplexität und das Codevolumen mit einem Gradienten gestiegen.

Können wir basierend auf dem Prinzip der Einfachheit und Bequemlichkeit andere Lösungen erkunden?

Da die Bestimmung von Berührungsereignissen komplizierter ist, warum nicht über diesen Tellerrand hinausgehen, einen anderen Weg finden und eine passendere Lösung erkunden?

So, wir haben unseren Plan drei.

Option 3

Lassen Sie mich über meine Idee sprechen. Da wir verhindern möchten, dass die Seite scrollt, warum nicht das Problem im Fenster beheben (d. h. Position: fest)? , so dass es nicht mehr scrollbar ist und beim Schließen der Maske freigegeben wird.

Position: behoben Ich muss Ihnen nicht zu viel vorstellen. Eine ausführliche Einführung finden Sie in diesem Artikel: //www.jb51.net/article/83175.htm

Natürlich sind einige Details zu beachten. Nach dem Korrigieren des Seitenfensters wird der Inhalt wieder oben angezeigt. Hier müssen wir ihn aufzeichnen und den oberen Wert synchronisieren.

Beispielcode:

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
 }
}

Denkzusammenfassung

• Wenn das Anwendungsszenario ein PC ist, ist die empfohlene Option eins wirklich nicht notwendig Zu praktisch

• Wenn das Anwendungsszenario h5 ist, können Sie Option zwei verwenden, aber ich empfehle Ihnen, Option drei zu übernehmen

• Wenn das Anwendungsszenario ist eine vollständige Plattform, dann sollten Sie Option drei nicht verpassen

Dieser Artikel geht hier zu Ende, ich empfehle hier dringend Option drei, weil sie einfach, bequem und gut kompatibel ist kann auf einmal verpackt werden.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Über Reaktionsprinzipien in Vue (ausführliches Tutorial)

So implementieren Sie das dynamische Laden von Balkendiagrammen in AngularJS

So verwenden Sie den Bereich im Angular-Bereich

So verwenden Sie React, um die Menüberechtigungssteuerung zu implementieren

Das obige ist der detaillierte Inhalt vonSo deaktivieren Sie das Scrollen auf der unteren Seite des Popup-Fensters. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!