私は特定のセクションで水平スクロールが必要です。そのためには、私はそのjqueryの例を実行して、jQueryを使用しています。スクロールはpage.how全体で動作しています私は特定のセクションのみのスクロールを設定していますか?つまり、スクロールする特定のdivをどのように設定できますか?ここにコードがあります。水平スクロールjqueryはページ全体を処理します
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/example.css" />
</head>
<body>
<section id="scrolll">
<div class="middle scroll" style="border:solid red;backgroun:red">
<img src="images/middle.png" alt="" />
</div>
<script type="text/javascript" src="../libs/jquery.min.js"></script>
<script type="text/javascript" src="../src/jquery.jInvertScroll.js"></script>
<script type="text/javascript">
(function($) {
var scrolll= document.getElementById('scrolll');
var elem = $.jInvertScroll(['.scroll'], // an array containing the selector(s) for the elements you want to animate
{
height: 600, // optional: define the height the user can scroll, otherwise the overall length will be taken as scrollable height
onScroll: function(percent) { //optional: callback function that will be called when the user scrolls down, useful for animating other things on the page
console.log(percent-50);
}
});
$(window).resize(function() {
if ($(window).width() <= 768) {
elem.destroy();
}
else {
elem.reinitialize();
}
});
}(jQuery));
</script>
</section>
<section>
<div style="border:solid orange;height:1000px"></div>
</section>
</body>
</html>