JS position:sticky 의 호환성 문 제 를 해결 하 는 방법

프로젝트 에서 sticky 의 레이아웃 에 유용 합 니 다.그러나 호환성 문제 로 인해 안 드 로 이 드 에서 좋 은 호환성 이 없 기 때문에 이 문 제 를 철저히 해결 하기 위해 하나의 구성 요소 만 써 서 이 번 거 로 운 문 제 를 해결 할 수 있 습 니 다.여기 서 왜 명령 이 아 닌 구성 요소 입 니까?원인 이 있 기 때 문 입 니 다.다음 에 말씀 드 리 겠 습 니 다.
position:sticky 의 호환성 및 역할
Caniuse 에 sticky 의 호환성 은 다음 과 같 습 니 다.

Sticky 의 역할 은 relative 와 fixed 의 결합 체 에 해당 하 는데 수 정 된 목표 노드 가 다시 화면 에 나타 날 때 relative 로 나타 나 고 초과 할 때 fixed 의 형식 으로 나타 나 는데 이 특성 때문에 우 리 는 sticky 의 시 뮬 레이 션 효 과 를 실현 할 수 있다.
sticky 구성 요소 구현
템 플 릿 부분

<template>
  <div class="sticky" :style="getPosition">
    <div class="sticky-warp">
      <slot></slot>
    </div>
  </div>
</template>

코드 판독:여기 서 제 가 구성 요 소 를 사용 하여 이 루어 졌 습 니 다.명령 을 사용 하지 않 고 이 루어 진 이 유 는 명령 이 침입 성 이 없고 사용 하기에 편리 하지만 한 가지 단점 은 수 정 된 노드 fixed 가 문서 흐름 에서 벗 어 나 스크롤 바 의 높이 를 바 꾸 는 것 입 니 다.네 이 티 브 스크롤 바 에 맞 춰 서 만 이 루어 지 는 것 은 문제 가 되 지 않 습 니 다.(물론 너무 빨리 굴 러 가 는 문제 도 있 습 니 다)그러나 사용자 정의 스크롤 에 맞 춰 서 이 절 충 된 방식 으로 이 루어 집 니 다.가장 바깥쪽 은 sticky 층 으로 브 라 우 저가 sticky 를 지원 하 는 지 판단 하고 지원 하지 않 으 면 relative 로 대체 합 니 다.그러면 브 라 우 저의 높이 를 바 꾸 지 않 고 stick-warp 층 의 postion 을 동적 으로 바 꾸 어 효 과 를 실현 합 니 다.
css 부분

<style scoped lang="less" rel="stylesheet/less">
  .sticky {
    width: 100%;
    .sticky-warp {
      width: 100%;
      background: inherit;
      will-change: change;
      height: inherit;
      top: inherit;
    }
  }
</style>

코드 해독:이곳 의 warp 층 의 배경 색 설정 은 sticky 와 일치 합 니 다.이렇게 하면 과도 가 너무 딱딱 하지 않 고 높이 와 top 은 사용자 의 대외 층 sticky 사용자 정의 에 따라 이 루어 집 니 다.이 부분 은 css 로 간단하게 완성 할 수 있 습 니 다.
JS 부분

<script type="text/babel">
  export default {
    data () {
      return {}
    },
    computed: {
      getPosition(){
        var position = this.cssSupport('position', 'sticky') ? 'sticky' : 'relative';
        return 'position:' + position;
      }
    },
    props: {},
    beforeMount () {
    },
    mounted(){
      this.init();
    },
    deactivated(){
      if(this.cssSupport('position', 'sticky')) {
        return;
      }
      /*  */
      var elWarp = this.$el.querySelector('.sticky-warp');
      elWarp.position = 'absolute';
    },
    methods: {
      init(){
        if (this.cssSupport('position', 'sticky')) {
          return;
        }
        var el = this.$el, target = this.$el.parentNode,
            elWarp = this.$el.querySelector('.sticky-warp'),
            top = this.getNumberValue(document.defaultView.getComputedStyle(el).top);
        this.addScrollListen(target, (event)=> {
          if (el.getBoundingClientRect().top <= top) {
            elWarp.style.position = 'fixed';
          }
          if (el.getBoundingClientRect().top >= 0 && elWarp.style.position != 'absolute') {
            elWarp.style.position = 'absolute';
          }
        })
      },
      cssSupport: function (attr, value) {
        var element = document.createElement('div');
        if (attr in element.style) {
          element.style[attr] = value;
          return element.style[attr] === value;
        } else {
          return false;
        }
      },
      getNumberValue(pxValue){
        var value = String(pxValue).match(/^\-?\+?[0-9]+/g);
        return value ? Number(value) : undefined;
      },
      addScrollListen(target, cb){
        target.addEventListener('y-scroll', (event)=> {
          cb && cb(event);
        });
      }
    },
  }

 
</script>

코드 해독:이 안 에는 주로 cssSupport 로 브 라 우 저의 지원 상황 을 판단 한 다음 에 여러 사용자 정의 스크롤 y-scroll 이벤트 의 감청,감청 top 값 의 변 화 를 통 해 sticky-warp 층 의 fixed 와 absolute 전환 을 실현 합 니 다.대략적인 원리 의 사고방식 과 실현 과정 은 바로 위 와 같다.사용자 정의 스크롤 의 github 주소:https://github.com/yejiaming/scroll스티커 구성 요소 와 원생 스크롤 의 명령 을 참고 하여 실 현 된 github 주 소 는 다음 과 같다https://github.com/yejiaming/sticky
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.