网站建设验收评审标准,php mysql 网站源码,软件技术是干什么的,免费网站代码大全unilateralScroll 方法是动画主事件 enterFromBelow 方法是鼠标从上向下滚动事件 enterFromAbove 方法是鼠标从下向上滚动事件 Action[“事件名”] 是使用自定事件 // index.js 文件/** 从下进入事件 -- FromLeftToRight 默认动画 */
const enterFromBelow (el, event) A… unilateralScroll 方法是动画主事件 enterFromBelow 方法是鼠标从上向下滚动事件 enterFromAbove 方法是鼠标从下向上滚动事件 Action[“事件名”] 是使用自定事件 // index.js 文件/** 从下进入事件 -- FromLeftToRight 默认动画 */
const enterFromBelow (el, event) Action[event event.length ? event[0] : FromLeftToRight](el);/** 从上进入事件 -- FromRightToLeft 默认动画 */
const enterFromAbove (el, event) Action[event event.length ? event[1] : FromRightToLeft](el);/** 鼠标滚动事件 */
export const unilateralScroll (el, event) {if (event.value event.value.length ! 0 event.value.length ! 2) throw new Error(Event value must be an array with two elements or without any value);if (event.value event.value.length 2) {if (Action[event.value[0]] undefined) throw new Error(event.value[0] Action must be a valid method action name);if (Action[event.value[1]] undefined) throw new Error(event.value[1] Action must be a valid method action name);}/** 进入方式 0未进入 1进入 2离开 */let way 0;/** 定义滚动条滚动方向 */let scrollType true;/** 获取初始滚动位置 */let scrollPos window.scrollY || document.documentElement.scrollTop;/** 监听滚动条事件 */window.addEventListener(scroll, function () {/** 确定新的滚动位置 */const newScrollPos window.scrollY || document.documentElement.scrollTop;newScrollPos scrollPos ? scrollType true : scrollType false;/** 更新滚动位置 */scrollPos newScrollPos;/** 不同方向进入可视区域 */if (scrollType way ! 0) way 1 ? enterFromBelow(el, event.value) : 离开事件;else if (!scrollType way ! 0) way 1 ? enterFromAbove(el, event.value) : 离开事件;});/** 观察元素 */const callback (entries) entries.forEach((entry) entry.isIntersecting ? way 1 : way 2);/** 创建一个观察者 */new IntersectionObserver(callback, { threshold: 0 }).observe(el);
}这里是默认事件处理可自定义内容事件 // action.js 文件export default class Action {/** 从下方进入可视窗口后左边先滚动右边固定* 左边滚动结束固定左边右边开始滚动* 到达盒子底边左右固定在盒子底边 */static FromLeftToRight (el) {if (el.children.length 2) throw new Error(Element must have at least two children);let dom1 el.children[0];let dom2 el.children[1];el.style.height dom1.offsetHeight dom2.offsetHeight - window.innerHeight 20 px;/** 判断父元素距离顶部可视窗口的距离是否小于等于0 */if (el.getBoundingClientRect().top 0 el.getBoundingClientRect().top -500) {dom1.style.top 0;dom2.style.top 0;dom2.style.position fixed;}let bottom window.innerHeight - dom1.getBoundingClientRect().bottom;/** 判断左侧元素距离底部可视窗口的距离是否大于等于0 */if (bottom 0 bottom 500) {dom1.style.top ;dom1.style.bottom 0;dom1.style.position fixed;dom2.style.position absolute;dom2.style.top dom1.offsetHeight - window.innerHeight 20 px;}let pb window.innerHeight - el.getBoundingClientRect().bottom;/** 判断父元素距离底部可视区域的距离 */if (pb 0 pb 500) {dom1.style.position absolute;}};/** 从上方进入可视窗口后右边先滚动左边固定* 右边滚动结束固定右边、左边开始滚动* 到达盒子顶边左右固定在盒子顶边 */static FromRightToLeft (el) {if (el.children.length 2) throw new Error(Element must have at least two children);let dom1 el.children[0];let dom2 el.children[1];/** 判断父元素距离顶部可视窗口的距离是否大于等于0 */if (el.getBoundingClientRect().bottom 0 el.getBoundingClientRect().bottom 500) {dom1.style.top ;dom1.style.bottom 0;dom1.style.position absolute;dom2.style.top ;dom2.style.bottom 0;dom2.style.position absolute;}let pb window.innerHeight - el.getBoundingClientRect().bottom;/** 判断父元素距离底部可视区域的距离 */if (pb 0 pb -500) {dom1.style.top ;dom1.style.bottom 0;dom1.style.position fixed;}let top dom2.getBoundingClientRect().top;/** 判断右侧元素距离顶部可视窗口的距离是否大于等于0 */if (top 0 top 500) {dom1.style.top 0;dom1.style.bottom ;dom1.style.position absolute;dom2.style.top 0;dom2.style.position fixed;}/** 判断父元素距离顶部可视窗口的距离是否小于等于0 */let ct el.getBoundingClientRect().top;if (ct 0 ct 500) {dom2.style.top 0;dom2.style.position absolute;}};// 自定义事件static “事件名” () {};
}这里通过 vue 指令在 vue 中使用。 // main.js 文件import Vue from vue
import App from ./App.vue
import router from ./routerimport { unilateralScroll } from ./utils/index;
Vue.config.productionTip false;// 设置指令, binding, vnode
Vue.directive(unilateralScroll, { inserted(el, binding) { unilateralScroll(el, binding) }});new Vue({router,store,render: h h(App)
}).$mount(#app);
// app.vue 文件templatediv idappdiv classbox/div!-- v-unilateralScroll[从上向下滚动事件, 从下向上滚动事件] --div classcontainer v-unilateralScrolldiv classc1div···内容1/div/divdiv classc2div···内容2/div/div/divdiv classflooter/div/div
/templatestyle langscss
* {margin: 0;padding: 0;
}html,
body {width: 100%;height: 100%;box-sizing: border-box;
}
body {overflow-y: auto;
}
.box {width: 100%;height: 120vh;background-color: #b1ffb1;
}
.container {width: 100%;overflow: hidden;position: relative;background-color: #4787e7b9;
}.c1 {left: 0;width: 50%;position: absolute;background-color: #cf7bcf;
}
.c2 {right: 0;width: 50%;position: absolute;background-color: #cfad7b;
}.flooter {width: 100%;height: 130vh;overflow: hidden;background-color: black;
}
/style 这里展示vue实现视频 左右分屏滚动 html 版本
