|
Сообщение от рони
|
|
мне сложно понять, почему scrollTop плохо
|
Оно не плохо, вам нужно более осторожно его использовать. Вот, в вашем примере, когда нажмешь кнопку, чтобы свернуть, начинается анимация в виде прокрутки вверх. Она длится 1.2 секунды. Если до того, как закончилась эта анимация, пользователь начнёт любым способом прокрутку, то начнётся дёрганье, поскольку скрипт крутит в одном направлении, вы в другом. Получается, что если во время такой анимации пользователь начнёт прокрутку, анимацию надо прекратить! Вот добавил в ваш пример...
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
.content__text {
font-size: 18px;
line-height: 26px;
font-family: Kazimir, 'Helvetica CY', Arial, sans-serif;
position: relative;
color: #333;
}
.content__text-wrap {
margin-bottom: 20px;
max-height: 400px;
overflow: hidden;
}
.open .content__text-wrap {
max-height: none;
}
.open.content__text.shadow:after {
opacity: 0;
transition: 0s;
}
.content__text.shadow:after {
transition: .8s;
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
height: 400px;
content: ' ';
pointer-events: none;
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 1%, rgba(255, 255, 255, 0) 70%, #fff 100%);
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 1%, rgba(255, 255, 255, 0) 70%, #fff 100%);
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 1%, rgba(255, 255, 255, 0) 70%, #fff 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0);
}
.product__button {
max-width: 176px;
margin: 0 auto 31px;
padding: 10px;
border: 1px solid #999;
border-radius: 3px;
font-family: GraphikCy-Medium, 'Helvetica CY', Arial, sans-serif;
font-size: 14px;
background: white;
line-height: 14px;
text-align: center;
cursor: pointer;
display: block;
}
.product__button:after {
content: 'Развернуть';
}
.open .product__button:after {
content: 'Свернуть';
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var page = $('body,html');
var types = "scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove";
function pageHandler() { page.stop(); }
$('.content__text').on('click', '.toggle', function() {
var open = $(this).parents('.content__text').toggleClass('open').is(".open");
var target = $("#test" /* window.location.hash */);
if (!open && target.length) {
page.on(types, pageHandler).animate({
scrollTop: target.offset().top
}, 1200, function() {
page.off(types, pageHandler);
});
}
})
});
</script>
</head>
<body>
<p id="test" style="height: 1000px">это условый якорь</p>
<div class="firstbl content__text shadow">
<div class="content content__text-wrap ">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus accusamus hic quae libero rem odit et fugit cumque dolore perferendis tempore officia illum atque nam, quia ut, quibusdam. Modi, ex.</div>
<div>Doloribus magnam, labore vero voluptatum quaerat quidem eveniet quo eos, minus aliquid commodi obcaecati animi, facilis voluptatibus voluptas ab, quasi veniam totam soluta molestias natus. Repellat animi perspiciatis, quos vitae.</div>
<div>Cumque ea laudantium corporis odio reprehenderit voluptates, quis iste aperiam eius pariatur itaque magni, autem consequuntur, odit officiis? Adipisci aliquid consequuntur tenetur quae magni eaque repellendus fuga quia nisi laboriosam!</div>
<div>Eligendi ut recusandae officiis nostrum praesentium modi error, quae ab velit itaque, beatae reprehenderit delectus unde id facere aliquam totam est facilis culpa expedita aspernatur! Et amet omnis porro exercitationem.</div>
<div>Fugit quisquam asperiores impedit ipsa, doloribus officiis maiores? Dolore possimus tenetur eum. Corrupti repudiandae doloribus officiis accusamus soluta fugiat consequatur hic, distinctio perferendis. Ipsum incidunt, magni veniam recusandae illum
cupiditate.</div>
<div>Iste autem sit quos provident fugiat doloribus, delectus adipisci inventore quam quis hic maxime. Deleniti optio quas hic reprehenderit voluptas eius fuga rerum, veritatis totam molestias officiis, deserunt quis aliquam.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus iusto soluta quibusdam, pariatur molestiae est. Provident impedit unde alias dolores rerum ex minus quae ab, et nihil similique fugit optio.</div>
<div>Hic odit, adipisci. Nam quia dolor architecto debitis. Possimus dolor impedit excepturi quidem. Aperiam neque aut voluptatibus sit earum sint, libero consectetur repellendus doloremque architecto qui, suscipit autem est magnam.</div>
</div>
<button class="toggle product__button"></button>
</div>
</body>
</html>
|
Сообщение от рони
|
|
мой уровень подготовки иногда не позволяет, даже понять
|
Я думаю, у вас хороший уровень, просто вы почему-то думаете, что если прокрутка, то это только колёсико мыши (почему я вам добавил столько событии?), если нажатие, то непременно только мышкой (почему я вам заменил на <button>), и т. д. В HTML в плане доступности продумано, и с этим не надо бороться (например, давайте всё сбросим, отменим и заново изобретём)