我正在使用jinvertScroll插件来完成水平滚动网站。但是，即使我的滚动容器（.scroll）足够长，可以包含所有可滚动内容，但仍会以随机间隔被切断，具体取决于屏幕分辨率，而不是明确设置的“ scroll”类宽度。
我尝试调整.scroll类的宽度，并在Jquery插件的开头编辑默认的“ width”和“ height”变量。这两个选项都不会对代码产生任何影响。
有人可以帮我隔离需要解决的CSS或jquery变量或代码，以解决此宽度问题吗？
我对jquery，视差和水平滚动效果没有经验，但是它们是我当前正在帮助开发的项目的要求。因此，非常感谢提供具体或包含任何示例的帮助！
这是我的代码的副本：
<div class="wrapper">
<div class="header">
This is the Header
</div>
<div class="sidebar">
<a href="#">Homepage</a>
<a href="#">Contact</a>
<a href="#">Projects</a>
</div>
<div class="scrollParent">
<div class="scroll">
<div class="page">container 1</div>
<div class="page">container 2</div>
<div class="page">container 3</div>
<div class="page">container 4</div>
<div class="page">container 5</div>
</div>
</div>
<div class="footer">
This is the Footer
</div>
</div>
<style>
body {
padding:20px;
overflow-x:hidden;
font-size:0;
background:url('https://previews.123rf.com/images/brebca/brebca0709/brebca070900053/1593170-house-plans-background.jpg');
background-repeat: no-repeat;
background-size:cover;
background-attachment:fixed;
}
.wrapper {
position:fixed;
height:700px;
width:1150px;
right:50%;
margin-right:-550px; /** Take half of the width to center it**/
margin-top:2.5%;
}
.header, .footer {
height:100px;
width:1150px;
display:block;
background:lavender;
/*margin:auto;*/
border:1px solid #7575a3;
box-sizing:border-box;
padding:0px 30px;
font:18pt 'montserrat',sans-serif;
font-weight:800;
text-transform:uppercase;
letter-spacing:-2px;
line-height:100px;
color:#7575a3;
}
.footer {
text-align:right;
}
.sidebar {
height:500px;
width:250px;
background:#f8f8f8;
border-left:1px solid #7575a3;
border-right:1px solid #7575a3;
box-sizing:border-box;
padding:20px 30px;
display:inline-block;
}
.sidebar a {
font:10pt 'montserrat',sans-serif;
text-transform:uppercase;
text-decoration:none;
font-weight:800;
display:block;
margin:30px 0px;
color:#7575a3;
}
.scrollParent {
width:900px;
height:500px;
overflow:hidden;
display:inline-block;
background:red;
vertical-align:top;
position:fixed;
}
.scroll {
position: relative;
z-index: 500;
width:4500px;
background:black;
font-size:0;
color:red;
white-space:nowrap;
height:500px;
}
.page {
display:inline-block;
top:0;
background:white;
height:500px;
width:900px;
box-sizing:border-box !important;
padding:20px 30px;
font:8pt 'montserrat',sans-serif;
vertical-align:top;
border-right:1px solid red;
}
</style>
<script>
/**
* jQuery Plugin for simple vertical scrolling - horizontal movement parallax effect
* I wrote this plugin for a project we have done.
*
* License:
* The MIT License (MIT)
*
* @version 0.8.3
*
* Copyright (c) 2013 pixxelfactory
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
**/
(function ($) {
'use strict';
$.jInvertScroll = function(sel, options) {
var defaults = {
width: 40000, // The horizontal container width
height:4000, // How far the user can scroll down (shorter distance = faster scrolling)
onScroll: function(percent) { // Callback fired when the user scrolls down, the percentage of how far the user has scrolled down gets passed as parameter (format: 0.xxxx - 1.0000)
// do whatever you like
}
};
var config = $.extend(defaults, options);
if(typeof sel === 'Object' && sel.length > 0) {
return;
}
var elements = [],
longest = 0,
totalHeight,
winHeight,
winWidth;
function init() {
// Extract all selected elements from dom and save them into an array
$.each(sel, function (i, val) {
$(val).each(function (e) {
elements.push($(this));
var w = $(this).width();
if (longest < w) {
longest = w;
}
});
});
// Use the longest elements width + height if set to auto
if (config.width == 'auto') {
config.width = longest;
}
if (config.height == 'auto') {
config.height = longest;
}
// Set the body to the selected height
$('body').css('height', config.height + 'px');
}
function calc() {
totalHeight = $(document).height();
winHeight = $(window).height();
winWidth = $(window).width();
}
function onscroll(e) {
var currY = $(this).scrollTop();
// Make calculations
calc();
var diff = totalHeight - winHeight;
var scrollPercent = 0;
if (diff != 0) {
// Current percentual position
scrollPercent = (currY / diff).toFixed(4);
}
// Call the onScroll callback
if(typeof config.onScroll === 'function') {
config.onScroll.call(this, scrollPercent);
}
// do the position calculation for each element
$.each(elements, function (i, el) {
var deltaW = el.width() - winWidth;
if (deltaW <= 0) {
deltaW = el.width();
}
var pos = Math.floor(deltaW * scrollPercent) * -1;
el.css('left', pos);
});
}
function setlisteners() {
// Listen for the actual scroll event
$(window).on('scroll resize', onscroll);
$([document, window]).on('ready resize', calc);
}
// Init actions
init();
setlisteners();
return {
reinitialize: function() {
init();
setlisteners();
},
destroy: function() {
// Remove previously added inline styles
$('body').attr('style', '');
// Remove listeners
$(window).off('scroll resize', onscroll);
$([document, window]).off('ready resize', calc);
}
};
};
}(jQuery));
$(function() {
var elem = $.jInvertScroll(['.scroll'], // an array containing the selector(s) for the elements you want to animate
{
// height: 6000, // 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);
}
});
$(window).resize(function() {
if ($(window).width() <= 768) {
elem.destroy();
}
else {
elem.reinitialize();
}
});
});
/** MY OWN JQUERY**/
$(document).ready(function(){
$('html').animate({scrollTop:0}, 1);
$('body').animate({scrollTop:0}, 1);
});
</script>