Ik wil graag uitschakelen op de HTML bodyvolledig. Ik heb de volgende opties geprobeerd:
-
overflow: hidden;(NIET WERKEN, GEBRUIKT NIET SCROLLINGEN, HET HEID DE SCHULDELINGEN) -
position: fixed;(dit werkte, maar het scrolde volledig naar de top, die onaanvaardbaar is voor deze specifieke toepassing)
Ik kon geen alternatieven voor deze twee opties vinden, zijn er nog meer?
Antwoord 1, Autoriteit 100%
Instellen heighten overflow:
html, body {margin: 0; height: 100%; overflow: hidden}
Antwoord 2, Autoriteit 7%
HTML CSS werkt prima als het lichaamstag niets doet, u kunt ook schrijven
<body scroll="no" style="overflow: hidden">
In dit geval moet het overheersen op het lichaamstag staan, het is gemakkelijker te controleren, maar geeft soms hoofdpijn.
Antwoord 3, Autoriteit 5%
Dit bericht was nuttig, maar wilde gewoon een klein alternatief delen dat anderen kan helpen:
Instellen max-heightin plaats van heightdoet ook de truc. In mijn geval schakel ik scrollen uit op basis van een klassenschakelaar. Instelling .someContainer {height: 100%; overflow: hidden;}Wanneer de hoogte van de container kleiner is dan die van de viewport de container rekken, wat niet zou zijn wat u zou willen. Instelling max-heightACCOUNTEN hiervoor, maar als de hoogte van de container groter is dan de viewport’s wanneer de inhoud verandert, schakelt u nog steeds scrollen uit.
Antwoord 4, Autoriteit 3%
Voeg hiervoor 2 CSS-eigenschappen toe aan het element <body>.
body {
height: 100%;
overflow-y: hidden;
}
Tegenwoordig zijn er veel nieuwswebsites waarvoor gebruikers een account moeten aanmaken. Meestal geven ze ongeveer een seconde volledige toegang tot de pagina, daarna tonen ze een pop-up en voorkomen ze dat gebruikers naar beneden scrollen.
BEWERKEN
Bovendien maken sommige websites (zoals Quora) ook delen van tekst wazig. Over het algemeen doen ze dit door de volgende CSS toe te passen.
filter: blur(3px);
Antwoord 5
- React >= 17.8 gebruiken?
- Wilt u dit voorwaardelijk doen?
useEffectte hulp!
function useImperativeDisableScroll({ element, disabled }) {
useEffect(() => {
if (!element) {
return
}
element.style.overflowY = disabled ? 'hidden' : 'scroll'
return () => {
element.style.overflowY = 'scroll'
}
}, [disabled])
}
Je zou dit bijvoorbeeld kunnen gebruiken met
useImperativeDisableScroll({ element: document.body, disabled: true })
Afhankelijk van uw gebruik, kunt u meer geluk hebben met
useImperativeDisableScroll({
element: document.scrollingElement,
disabled: true
})
Merk echter op dat u op het moment van schriftelijk wilt polsen document.scrollingElement.
Nuttige links:
- https://developer.mozilla.org/en -US / DOCS / WEB / API / DOCUMENT / Scrolllingelement
- https://drafts.csdswg.org/csSom-view/ # DOM-document-scrolllingelement
- https://caniuse.com/document-scrollingelement
- https://github.com/yangg/scrolling-ilement
Antwoord 6
HTML
<body id="appBody">
....
</body>
js
function disableBodyScroll(){
const element = document.querySelector("#appBody");
element.classList.add("stop-scroll");
}
function enableBodyScroll(){
const element = document.querySelector("#appBody");
element.classList.remove("stop-scroll");
}
CSS
.stop-scroll {
margin: 0;
height: 100%;
overflow: hidden;
}
Antwoord 7
Als u in orde bent met de pagina naar de bovenkant bladeren. U kunt doen:
position: fixed;
Op het element wil je niet schuifbaar zijn. Ik weet dat het niet het antwoord dat je wilde, maar ik beantwoord de titel rechtstreeks voor degenen die googled voor dit probleem.
Antwoord 8
Waarom probeer je dit niet eens:
<style type="text/css">
html, body {
overflow: hidden;
}
</style>