当前元素变为中心时，下一个元素如何按中心滚动？

时间：2019-04-13 23:35:07

标签： javascript jquery html css html5

我想做什么

like this

就像这样，最初是切换滚动条。
当前（活动）元素到达中心时，下一个元素也希望能够在中心滚动。

this

当看到底部元素时，滚动停止，并切换为开关滚动。

当前状态

我已经有一个滚动条和一个获取中心的代码。
demo - JSFiddle

目前，这不起作用，但是我编写了以下代码：

def add(request):
    ...
    product.product_id = soup.find('h1', class_='product-id').text
    existing_product = Product.objects.filter(product_id=product.product_id)
    if existing_product:
        return redirect(existing_product.get_absolute_url())
问：我该怎么做像gif一样的东西？

谢谢。

代码

// Get the center of the height of .main
const rect = document.getElementsByClassName("main")[0].getBoundingClientRect();
const mainHCenter = rect.top + (rect.height / 2);
const mainWCenter = rect.left + (rect.width / 2);

// Get the element at the center of the height of .main
const centerElm = document.elementFromPoint(mainWCenter, mainHCenter);

if ($("p.active") === centerElm) {
      $(".mai").scroll().css('top',mainHCenter + 'px');
} else {
  $(".mai").scroll(function(e) {
    e.preventDefault();
  });
}

function onScroll() {
  $(".main > p").each(function(i) {
    $(this).removeClass('active');

    if ($(this).attr('class').includes(i) && i === swiperCnt.activeIndex) {
      $(this).addClass('active');
    }

/* from here */
// Get the center of the height of .main
    const rect = document.getElementsByClassName("main")[0].getBoundingClientRect();
    const mainHCenter = rect.top + (rect.height / 2);
    const mainWCenter = rect.left + (rect.width / 2);
    
// Get the element at the center of the height of .main
    const centerElm = document.elementFromPoint(mainWCenter, mainHCenter);
    
    if ($("p.active") === centerElm) {
          $(".mai").scroll().css('top',mainHCenter + 'px');
    } else {
      $(".mai").scroll(function(e) {
        e.preventDefault();
      });
    }
/* to here */

  });
}



/* swiper (doesn't matter) */
var swiperCnt = new Swiper('.swiperCnt', {
  direction: 'vertical',
  autoHeight: true,
  pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
    clickable: 'true',
  },
  keyboard: {
    enabled: true,
  },
  mousewheel: {
    forceToAxis: true,
    invert: true,
  },
  renderBullet: function(index, className) {
    return '<span class="' + className + '">' + (index + 1) + '</span>';
  },
});


$(function() {
  var that;
  var i = 0;
  var j = $(".main > p").length - 1;
  $('.mai').bind('mousewheel', function(e) {
    if (e.originalEvent.wheelDelta < 0) {
      //scroll down
      i++;
      if (i >= j) {
        i = j;
      }
      if (i <= j) {
        $(".main > p").each(function(i) {
          if ($(this).hasClass('active')) {
            if ($(this).hasClass(i)) {
              if (i < j) {
                that = $(this).next();
              } else {
                that = $(this);
              }
            }
          }
          $(this).removeClass('active');
        });
        $(that).addClass('active');
      }
    } else {
      //scroll up
      i--;
      if (i <= 0) {
        i = 0;
      }
      if (i >= 0) {
        $(".main > p").each(function(i) {
          if ($(this).hasClass('active')) {
            if (i > 0) {
              that = $(this).prev();
            } else {
              that = $(this);
            }
          }
          $(this).removeClass('active');
        });
        $(that).addClass('active');
      }
    }
    swiperCnt.slideTo(i);
    //prevent page from scrolling
    return false;
  });
  swiperCnt.on('scroll', function() {
    onScroll();
  });
  swiperCnt.on('paginationUpdate', function() {
    onScroll();
  });
  onScroll();
});
/* The corresponding part is at the bottom too. (It is faster to count from the bottom)
(There is a mark in the comment) */


html {
  font-size: 62.5%;
  height: 100%;
}

body {
  font-size: 1.5rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #c6d2dd;
  color: white;
}

#wrap {
  display: flex;
  width: 100%;
  height: 100vh;
  padding: 1.8rem 4.7rem 2.7rem 2.4rem;
}

h2, h3, h4, h5, h6 {
  display: inline;
}

.mission, .m-p, .concept, .c-p, .what, .target, .t-p, .main-p, .nb, .nb-p, .period, .p-p, .category, .cg-p, .class, .cl-p, .release, .r-p, .nbb, .per, .cat, .cla, .rel {
  display: inline-block;
}

#left, #right {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100%;
}

#left {
  width: 57%;
}

#right {
  position: relative;
  width: 43%;
  padding-left: 6.5rem;
}

.title {
  height: 3.55rem;
  font-size: 1.8rem;
  padding-bottom: 1.7rem;
}

.solid-ti {
  position: absolute;
  width: 100%;
  border-top: 0.1rem solid white;
  margin-top: 5.35rem;
}

.solid-mc {
  border-bottom: 0.1rem solid white;
  margin-left: -2.4rem;
}

.solid-tm {
  border-bottom: 0.1rem solid white;
  margin-right: -4.7rem;
}

.swiper-pagination {
  top: 6rem;
}

.max {
  position: relative;
  width: 100%;
  flex: 1;
}

.max-inner {
  position: absolute;
  width: 100%;
  height: 100%;
}

.swiper-slide {
  display: flex;
  align-items: center;
}
.swiper-slide img {
  width: 100%;
}

.swiperP {
  height: auto;
}

.swiper-pagination-bullet {
  background: none;
  font-size: 1rem;
  margin-right: 0.5rem;
  opacity: 0.3;
}
.swiper-pagination-bullet::before {
  content: "0";
  font-weight: bold;
}
.swiper-pagination-bullet:hover::before {
  content: "1";
  font-weight: bold;
}

.swiper-pagination-bullet-active {
  background: none;
  transform: scale(1);
  transition-duration: 0.16s;
  opacity: 0.7;
}
.swiper-pagination-bullet-active::before {
  content: "1";
  font-weight: bold;
}

.mis {
  padding: 2.6rem 0 0.7rem 0;
}

.mission {
  padding-right: 2rem;
}

.con {
  padding-top: 0.7rem;
}

.concept {
  padding-right: 2rem;
}

.what {
  margin: 2rem 1.5rem 0 0;
  display: flex;
  align-items: center;
}
.what > img {
  height: 2rem;
  margin-right: 0.3rem;
}
.what > img:last-child {
  margin-right: 1rem;
}
.what span {
  font-size: 1.4rem;
  border: 0.1rem solid white;
  border-radius: 0.3rem;
  margin-right: 1rem;
  padding: 0.5rem 0.4rem 0.4rem;
}

.tar {
  padding: 2.2rem 0 2rem 0;
  flex-grow: 1;
}

.target {
  padding-right: 1.2rem;
}

.t-p {
  vertical-align: top;
}

.heartbox {
  display: flex;
  align-items: center;
}
.heartbox div:last-child {
  user-select: none;
}

input {
  opacity: 0;
}

@keyframes rubberBand {
  from {
    transform: scale(1, 1, 1);
  }
  30% {
    transform: scale3d(1.15, 0.75, 1);
  }
  40% {
    transform: scale3d(0.75, 1.15, 1);
  }
  50% {
    transform: scale3d(1.1, 0.85, 1);
  }
  65% {
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    transform: scale3d(1.05, 0.95, 1);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}
.heart {
  cursor: pointer;
  width: auto;
  height: 25px;
  fill: #E2E2E2;
}

#fav:checked + label .heart {
  fill: #e23b3b;
  animation: rubberBand 0.8s;
}





/*
 * from here
 */
.mai {
  margin: 2.8rem 0 0 0;
  height: 37.8rem;
  overflow-y: scroll;
  overflow-x: hidden;
  -ms-overflow-style: none;
}
.mai::-webkit-scrollbar {
  display: none;
}

.main p {
  opacity: 0.3;
}
.main .active {
  opacity: 1;
}

/*
 * to here
 */





.▼ {
  align-self: flex-end;
  margin: 1.3rem 1.5rem 7.9625rem 0;
}

.R-under {
  text-align: right;
  position: absolute;
  right: 0;
  bottom: 0;
}

.nbb {
  padding-right: 4.8rem;
}

.nb {
  padding-right: 0.8rem;
}

.period {
  padding-right: 1.6rem;
}

.top {
  display: flex;
  justify-content: space-between;
  font-size: 1.1rem;
  padding: 0.3rem 0 2rem;
  text-align: right;
}

.category {
  padding-right: 1.4rem;
}

.class {
  padding-right: 1.4rem;
}

.release {
  padding-right: 1.4rem;
}

1 个答案:

答案 0 :(得分：0)

已更新。

您可以在https://gist.github.com/jacobsun/1e2eff94b082ed446c730027c241fe03

中找到js文件

像这样的HTML结构：

    <div class="lazy-scroll-wrapper">
        <div class="lazy-scroll-itemlist">
            <div class="lazy-scroll-item a">A</div>
            <div class="lazy-scroll-item b">B</div>
            <div class="lazy-scroll-item c">C</div>
            <div class="lazy-scroll-item d">D</div>
            <div class="lazy-scroll-item e">E</div>
            <div class="lazy-scroll-item f">F</div>
            <div class="lazy-scroll-item g">G</div>
        </div>
    </div>

加载脚本后，运行

 lazyScroll({
    height: '400px', // required, wrapper height
    itemHeight: '50px', // required, item height

    wrapper: '.lazy-scroll-wrapper', // optional, selector
    itemlist: '.lazy-scroll-itemlist', // optional, selector
    item: '.lazy-scroll-item', // optional, selector
    // optional, default: 0, allow up and down,
    // 1: no scroll down, -1: no scroll up
    noDirection: 0,
    highlightClass: 'highlight', // optional, current highlght class, no dot
    step: 3 // optional, control scroll speed
  })

脚本的主要缺点是您必须手动编写元素外观的代码，我的意思是宽度，高度，边距...我找不到一种简单的方法可以通过脚本弄清楚这一点。例如通过简单的滚动效果，可以看到多少个元素，这不是问题。但是实际上，我们必须知道什么时候不需要滚动。如果让脚本处理属性，将会有很多复杂的计算。

演示：https://codepen.io/jacobsun/full/wZydXX

我使用了mousewheel，这是一个已弃用的事件，我发现它是可靠且简单的事件，如果您有更好的解决方案，请发表评论。

相关问题
最新问题