Skip to content

Conversation

@pikax
Copy link
Owner

@pikax pikax commented May 29, 2020

allow to scroll lock components

<template>
  <div>
    <label>scrollLock</label>
    <input type="checkbox" v-model="locked" />
  </div>
  <div ref="scrollable" class="scroll-lock-example">
    <p v-for="i in 100">
      NOBODY READS THESE ANYMORE
    </p>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";
import { useLockScroll } from "vue-composable";

export default defineComponent({
  setup() {
    const scrollable = ref();
    const { locked } = useLockScroll(scrollable);

    return {
      scrollable,
      locked
    };
  }
});
</script>

<style>
.scroll-lock-example {
  height: 300px;
  width: 300px;
  overflow: scroll;
}

.no-scroll {
  overflow: hidden;
}
</style>

@pikax pikax added the composable New composable label May 29, 2020
@pikax pikax changed the title Feat: useScrollLock feat: useScrollLock May 29, 2020
@pikax pikax changed the title feat: useScrollLock feat(useScrollLock): add useScrollLock composable Jun 4, 2020
@pikax pikax marked this pull request as draft July 18, 2020 09:19
pikax added 3 commits July 25, 2020 09:31
# Conflicts:
#	examples/vue-next-webpack-preview-master/yarn.lock
#	packages/vue-composable/src/api.2.ts
#	packages/vue-composable/src/api.3.ts
#	packages/vue-composable/src/api.ts
#	packages/vue-composable/src/misc/index.ts
@pikax pikax marked this pull request as ready for review July 25, 2020 11:26
@pikax pikax merged commit 0da2f44 into master Jul 27, 2020
@pikax pikax deleted the feat/scrollLock branch July 27, 2020 14:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

composable New composable

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants