pistachiouseLockScroll
Add
no-scrollclass to a element or selector.
Parameters
typescript
import { useLockScroll } from '@elonehoo/pistachio'
const options = {
lockedClass: String,
auto: Boolean,
onChange(el: Element, lock: Boolean)
}
const selector = '.selector'
const lockClass = 'lock-class'
const element = ref<HTMLElement>()
const elements = [element]
useLockScroll(selector, options?)
useLockScroll(selector, lockClass?)
useLockScroll(element)
useLockScroll(element, options?)
useLockScroll(element, lockClass?)
useLockScroll(elements)
useLockScroll(elements, options?)
useLockScroll(elements, lockClass?)
import { useLockScroll } from '@elonehoo/pistachio'
const options = {
lockedClass: String,
auto: Boolean,
onChange(el: Element, lock: Boolean)
}
const selector = '.selector'
const lockClass = 'lock-class'
const element = ref<HTMLElement>()
const elements = [element]
useLockScroll(selector, options?)
useLockScroll(selector, lockClass?)
useLockScroll(element)
useLockScroll(element, options?)
useLockScroll(element, lockClass?)
useLockScroll(elements)
useLockScroll(elements, options?)
useLockScroll(elements, lockClass?)
| Parameters | Type | Required | Default | Description |
|---|---|---|---|---|
| selector | string | true | string selector | |
| element | Ref<Element> | Element | true | template element | |
| elements | Ref<Elements[]> | Elements[] | true | list of elements | |
| options | Options | false | Options for useLockScroll | |
| lockClass | string | false | no-scroll | custom lockClass |
State
The useLockScroll function exposes the following reactive state:
typescript
import { useLockScroll } from '@elonehoo/pistachio'
const { locked } = useLockScroll()
import { useLockScroll } from '@elonehoo/pistachio'
const { locked } = useLockScroll()
| State | Type | Description |
|---|---|---|
| locked | Ref<boolean> | Is currently locked |
Example
Toggle locked to enable or disable scroll Locked
1
2
3
4
5
6
7
8
9
10
vue
<script setup lang="ts">
import { ref } from 'vue'
import { useLockScroll } from '@elonehoo/pistachio'
const elref = ref<any>(null)
const { locked, remove } = useLockScroll(elref)
</script>
<template>
<div>
Toggle
<b>locked</b> to enable or disable
<b>scroll</b>
<div ref="elref" class="scroll-component">
<p v-for="x in 10" :key="x">
{{ x }}
</p>
</div>
<button @click="remove">
remove
</button>
<span>
<input v-model="locked" type="checkbox">
Locked
</span>
</div>
</template>
<style scoped>
.scroll-component {
overflow: scroll;
height: 70px;
background: gray;
}
.no-scroll {
overflow: hidden !important;
}
</style>
<script setup lang="ts">
import { ref } from 'vue'
import { useLockScroll } from '@elonehoo/pistachio'
const elref = ref<any>(null)
const { locked, remove } = useLockScroll(elref)
</script>
<template>
<div>
Toggle
<b>locked</b> to enable or disable
<b>scroll</b>
<div ref="elref" class="scroll-component">
<p v-for="x in 10" :key="x">
{{ x }}
</p>
</div>
<button @click="remove">
remove
</button>
<span>
<input v-model="locked" type="checkbox">
Locked
</span>
</div>
</template>
<style scoped>
.scroll-component {
overflow: scroll;
height: 70px;
background: gray;
}
.no-scroll {
overflow: hidden !important;
}
</style>