0
アニメーションにはGreenSock（https://greensock.com/get-started-js）を使用しています。Greensockを使用したスクロールアニメーションの問題
問題は、マウスホイールを下にスクロールすると、アニメーションが右から左に動作していることです。これは正しいことではありません。マウスのスクロールホイールを上から右に動かし、マウスのスクロールホイールを下にしてから左から右に動かす必要があります。私は速いスクロールが必要です。
マウスホイールのスクロールが速い場合、どうすれば高速を右から左に、またはその逆にアニメーションできますか？
私はいくつかのコードを試しましたが、動作しませんでした。
これで私を助けてくれますか？
/*scroll the page horizontal*/
(function() {
var content = document.getElementById("content"); // container of scrollable content
var xScroll = 0; // initialize virtual scroll position
var ignore = false; // ignore flag, decides whether xScroll needs to be updated (user scrolls via scrollbar) or not (user scrolls via mousewheel)
function scrollHorizontally(e) {
// every browser gives another e.deltaY -> only get the current direction and set an own speed
var direction = (e.deltaY>0) ? 1 : -1;
xScroll = xScroll+direction*120; // calculate new virtual scroll positon -> scroll position at the end of animation
// set limits to avoid overshooting and stucking at beginning or end
var max = content.scrollWidth - content.clientWidth;
if (xScroll <= 0) {
xScroll = 0;
} else if (xScroll >= max) {
xScroll = max;
}
ignore = true; // user scrolls via mousewheel -> block updates of xScroll until animation ahs finished
// scroll smooth to xScroll
TweenLite.to(content, 1, { ease: Power1.easeOut, scrollTo:{x:xScroll} });
e.preventDefault();
}
function updateXScroll(e) {
if (xScroll == content.scrollLeft) {
// scroll animation has finished -> reset ignore flag -> xScroll will be updated again
ignore = false;
}
if (!ignore) {
// if scroll event was NOT fired by mousewheel, update xScroll
xScroll = content.scrollLeft;
}
}
if (content.addEventListener) {
// Standard
content.addEventListener("scroll", updateXScroll, false); // update xScroll at scrollbar scrolls
content.addEventListener("wheel", scrollHorizontally, false); // make smooth scroll animation when srolling via mousewheel
} else {
// IE 6/7/8
content.attachEvent("onmousewheel", scrollHorizontally);
}
})();#content {
position:fixed;
display: inline-block;
overflow-x: scroll;
width: 100%;
overflow-y: hidden;
top: 0;
right:0;
height: 100%;
}
#content > div{
overflow: hidden;
width:350%;/*to increase the width */
}
.horizontal_scroll .full_screen_100
{
height: 100%;
background-color: #fff;
display: flex;
}
.horizontal_scroll .full_screen_100 article{
width: 900px;
height: 100%;
float:left;
border-left: solid 1px #E2E2E2;
}<div id="content">
<div class="horizontal_scroll">
<div class="full_screen_100">
<article>
<span class="page_slogan">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </span>
</article>
<article>
<span class="page_slogan">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
</article>
<article>
<span class="page_slogan">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
</article>
<article>
<span class="page_slogan">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </span>
</article>
<article>
<span class="page_slogan">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
</article>
<article>
<span class="page_slogan">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
</article>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/plugins/CSSPlugin.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenLite.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/plugins/ScrollToPlugin.min.js"></script>
前にマイナス（
-）を削除はい、1つの問題は、助けを求めresolved.Thanksを得ました。私は第2号にあなたの助けが必要です。私はスピードホイールをスクロールしているときにスクロールバーが非常にスクロールしていることを意味します。 –@NarendraVerma同じ行で、2番目の引数は遷移時間です： 'TweenLite.to（content、0.5、{scrollTo：{x：content.scrollLeft - （delta * 40）}}）'。ここでは0.5秒に設定されています。より短い移行時間の間、それをより低くする。 – FcoRodr
もし私が0.5から0.2に変わると、スクローリングセクションは直線的に進まない。私はスムーズにスクロールしなければならないことを意味します –