当当前元素变为中心时，下一个元素如何按中心滚动? [英] How can the next element be scrolled by center when the current element becomes center?
本文介绍了当当前元素变为中心时，下一个元素如何按中心滚动?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想做什么
像这样，最初是切换滚动条.
当当前(活动)元素到达中心时，下一个元素也希望能够在中心滚动.
当它看到底部的元素时，滚动停止并变为切换滚动.
当前状态
我已经有一个开关滚动条和一个代码来获取中心.
演示-JSFiddle
目前，这不起作用，但是我编写了以下代码:
// 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();
});
}
问我该怎么做像gif一样的东西?
谢谢.
代码
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;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css" rel="stylesheet"/>
<!-- The corresponding part is at the bottom. (It is faster to count from the bottom)
(There is a mark in the comment) -->
<div class="solid-ti"></div>
<div id="wrap">
<div id="left">
<h1 class="title">動と静を共有する椅子「Rollse」</h1>
<div class="swiper-pagination"></div>
<div class="swiper-container swiperCnt max">
<div class="swiper-wrapper imgs max-inner">
<div class="swiper-slide"><img class="work" src="http://placehold.jp/45/1920a6/ffffff/693x350.png?text=1" alt="Rollse-logo" /></div>
<div class="swiper-slide"><img class="work" src="http://placehold.jp/45/199fa6/ffffff/693x350.png?text=2" alt="Rollse-killer" /></div>
<div class="swiper-slide"><img class="work" src="http://placehold.jp/45/a61972/ffffff/693x350.png?text=3" alt="Rollse-data" /></div>
<div class="swiper-slide"><img class="work" src="http://placehold.jp/45/a6a619/ffffff/693x350.png?text=4" alt="Rollse-image" /></div>
</div>
</div>
<div class="L-under">
<div class="mis">
<h3 class="mission">MISSION:</h3>
<p class="m-p">触覚に訴えるプロダクト ▶︎ 3人チームの1人が、この触り心地を発見</p>
</div>
<div class="solid-mc"></div>
<div class="con">
<h2 class="concept">CONCEPT:</h2>
<p class="c-p">緊張感のある空間をつくる。</p>
</div>
<div class="what">
<img src="http://placehold.jp/45/d4d4d4/d4d4d4/28x20.png?text=_" alt="2nd" /><img src="http://placehold.jp/45/d4d4d4/d4d4d4/20x20.png?text=_" alt="ai" /><img src="http://placehold.jp/45/d4d4d4/d4d4d4/20x20.png?text=_" alt="vw" />
<span>企画</span>
<span>雑貨の設計</span>
<span>ネーミング</span>
<span>文章</span>
<span>展開</span>
</div>
</div>
</div>
<div id="right">
<div class="top">
<div class="cat">
<h5 class="category">CATEGORY:</h5>
<p class="cg-p">雑貨・プロダクト</p>
</div>
<div class="cla">
<h5 class="class">CLASS:</h5>
<p class="cl-p">デザイン研究</p>
</div>
<div class="rel">
<h5 class="release">RELEASE:</h5>
<p class="r-p">2017/06</p>
</div>
</div>
<div class="heartbox">
<div class="tar">
<h3 class="target">TARGET:</h3>
<p class="t-p">生活に刺激を求めている人<br> デザインされたものが好きな人
<br> 動くのに若干抵抗がある人
</p>
</div>
<div>
<input type="checkbox" name="fav" id="fav">
<label for="fav">
<svg class="heart" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 37 32"
style="enable-background:new 0 0 37 32;" xml:space="preserve">
<path class="st0" d="M27,0c-2.5,0-4.9,0.9-6.7,2.6C19.6,3.2,19,4,18.5,4.7C18,4,17.4,3.2,16.7,2.6C14.9,0.9,12.5,0,10,0
C4.5,0,0,4.5,0,10c0,3.7,1.2,6.7,3.9,9.8c3.9,4.6,13.9,11.6,14.3,11.9c0.1,0.1,0.2,0.1,0.3,0.1s0.2,0,0.3-0.1
c0.4-0.3,10.4-7.3,14.3-11.9c2.7-3.2,3.9-6.1,3.9-9.8C37,4.5,32.5,0,27,0z" /></svg>
</label>
</div>
</div>
<div class="solid-tm"></div>
<!--
from here
-->
<div class="mai max">
<section class="main max-inner">
<p class="active 0">This part is Switch scroll. (move by scrolling) <br> rolls（渦）×rose（バラ）<br> モチーフの見た目から命名しました。
<br> Rは小文字より大文字にすることで、凛々しさを演出し、
<br> 大人の美しさを際立たせました。
</p>
<br>
<p class="1">触覚に訴える。それで日常の問題を解決できたら。ついつい無駄に過ごしてしまいがちな日常。<br> そこであえて触感の悪いものを提供して、その無駄な時間を少しでも減らせる手助けになる商品をつくりました。
</p>
<br>
<p class="2">無数の紙を渦状に丸めた形状によって、片面は固く、もう片面は程よく弾力のある、画期的な椅子になっています。<br> 様々な素材や大きさのロールによるカスタム仕様なので、様々な展開が可能です。
</p>
<p class="3">毎日の慣れた生活空間の中に新感覚の刺激を与えてくれ、エキサイティングな感覚と少しのスリルを味わうことができます。</p>
</section>
</div>
<!--
to here
-->
<img src="http://placehold.jp/45/d4d4d4/d4d4d4/14x12.png?text=_" alt="▼" class="▼" width="14" />
<div class="R-under">
<div class="nbb">
<h4 class="nb">N.B.:</h4>
<p class="nb-p">投票第１位</p>
</div>
<div class="per">
<h4 class="period">PERIOD:</h4>
<p class="p-p">1週間</p>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
解决方案
已更新.
您可以在>://gist.github.com/jacobsun/1e2eff94b082ed446c730027c241fe03
像这样的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
我使用了鼠标滚轮，这是一个已过时的事件，我发现它是可靠且简单的，如果您有更好的解决方案，请发表评论.
What I want to do
Like this, Initially the switching scroll.
When the current (active) element comes to the center, the next element also wants to be able to scroll in the center.
When it see the bottom element, the scroll stops and it changes to a switch scroll.
Current status
I already have a switch scroll and a code to get the center.
demo - JSFiddle
For now this is not working, but I wrote the following code:
// 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();
});
}
Q. What should I do to do something like gif?
Thank you in advance.
Code
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;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css" rel="stylesheet"/>
<!-- The corresponding part is at the bottom. (It is faster to count from the bottom)
(There is a mark in the comment) -->
<div class="solid-ti"></div>
<div id="wrap">
<div id="left">
<h1 class="title">動と静を共有する椅子「Rollse」</h1>
<div class="swiper-pagination"></div>
<div class="swiper-container swiperCnt max">
<div class="swiper-wrapper imgs max-inner">
<div class="swiper-slide"><img class="work" src="http://placehold.jp/45/1920a6/ffffff/693x350.png?text=1" alt="Rollse-logo" /></div>
<div class="swiper-slide"><img class="work" src="http://placehold.jp/45/199fa6/ffffff/693x350.png?text=2" alt="Rollse-killer" /></div>
<div class="swiper-slide"><img class="work" src="http://placehold.jp/45/a61972/ffffff/693x350.png?text=3" alt="Rollse-data" /></div>
<div class="swiper-slide"><img class="work" src="http://placehold.jp/45/a6a619/ffffff/693x350.png?text=4" alt="Rollse-image" /></div>
</div>
</div>
<div class="L-under">
<div class="mis">
<h3 class="mission">MISSION:</h3>
<p class="m-p">触覚に訴えるプロダクト ▶︎ 3人チームの1人が、この触り心地を発見</p>
</div>
<div class="solid-mc"></div>
<div class="con">
<h2 class="concept">CONCEPT:</h2>
<p class="c-p">緊張感のある空間をつくる。</p>
</div>
<div class="what">
<img src="http://placehold.jp/45/d4d4d4/d4d4d4/28x20.png?text=_" alt="2nd" /><img src="http://placehold.jp/45/d4d4d4/d4d4d4/20x20.png?text=_" alt="ai" /><img src="http://placehold.jp/45/d4d4d4/d4d4d4/20x20.png?text=_" alt="vw" />
<span>企画</span>
<span>雑貨の設計</span>
<span>ネーミング</span>
<span>文章</span>
<span>展開</span>
</div>
</div>
</div>
<div id="right">
<div class="top">
<div class="cat">
<h5 class="category">CATEGORY:</h5>
<p class="cg-p">雑貨・プロダクト</p>
</div>
<div class="cla">
<h5 class="class">CLASS:</h5>
<p class="cl-p">デザイン研究</p>
</div>
<div class="rel">
<h5 class="release">RELEASE:</h5>
<p class="r-p">2017/06</p>
</div>
</div>
<div class="heartbox">
<div class="tar">
<h3 class="target">TARGET:</h3>
<p class="t-p">生活に刺激を求めている人<br> デザインされたものが好きな人
<br> 動くのに若干抵抗がある人
</p>
</div>
<div>
<input type="checkbox" name="fav" id="fav">
<label for="fav">
<svg class="heart" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 37 32"
style="enable-background:new 0 0 37 32;" xml:space="preserve">
<path class="st0" d="M27,0c-2.5,0-4.9,0.9-6.7,2.6C19.6,3.2,19,4,18.5,4.7C18,4,17.4,3.2,16.7,2.6C14.9,0.9,12.5,0,10,0
C4.5,0,0,4.5,0,10c0,3.7,1.2,6.7,3.9,9.8c3.9,4.6,13.9,11.6,14.3,11.9c0.1,0.1,0.2,0.1,0.3,0.1s0.2,0,0.3-0.1
c0.4-0.3,10.4-7.3,14.3-11.9c2.7-3.2,3.9-6.1,3.9-9.8C37,4.5,32.5,0,27,0z" /></svg>
</label>
</div>
</div>
<div class="solid-tm"></div>
<!--
from here
-->
<div class="mai max">
<section class="main max-inner">
<p class="active 0">This part is Switch scroll. (move by scrolling) <br> rolls（渦）×rose（バラ）<br> モチーフの見た目から命名しました。
<br> "R"は小文字より大文字にすることで、凛々しさを演出し、
<br> 大人の美しさを際立たせました。
</p>
<br>
<p class="1">触覚に訴える。それで日常の問題を解決できたら。ついつい無駄に過ごしてしまいがちな日常。<br> そこであえて触感の悪いものを提供して、その無駄な時間を少しでも減らせる手助けになる商品をつくりました。
</p>
<br>
<p class="2">無数の紙を渦状に丸めた形状によって、片面は固く、もう片面は程よく弾力のある、画期的な椅子になっています。<br> 様々な素材や大きさのロールによるカスタム仕様なので、様々な展開が可能です。
</p>
<p class="3">毎日の慣れた生活空間の中に新感覚の刺激を与えてくれ、エキサイティングな感覚と少しのスリルを味わうことができます。</p>
</section>
</div>
<!--
to here
-->
<img src="http://placehold.jp/45/d4d4d4/d4d4d4/14x12.png?text=_" alt="▼" class="▼" width="14" />
<div class="R-under">
<div class="nbb">
<h4 class="nb">N.B.:</h4>
<p class="nb-p">投票第１位</p>
</div>
<div class="per">
<h4 class="period">PERIOD:</h4>
<p class="p-p">1週間</p>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
解决方案
updated.
You can find the js file in https://gist.github.com/jacobsun/1e2eff94b082ed446c730027c241fe03
HTML structure like this:
<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>
After you load the script, run
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
})
The main downside of the script is you have to code the element appearance manually, I mean the width, height, margin... I can't find an easy way to figure that out with script. e.g. How many elements are visible, in an simple scroll effect, this is not a problem. But in our effect, we have to know when we don't need to scroll. There would be a lot of complicate computing if we let the script handle the properties.
Demo: https://codepen.io/jacobsun/full/wZydXX
I use mousewheel, which is a deprecated event, I found it is a reliable and easy one, if you have better solution, please comment.
这篇关于当当前元素变为中心时，下一个元素如何按中心滚动?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
