JQuery使水平滚动页面过大
JQuery making horizontally scrolling page too big
我正在为一个客户端制作一个侧面滚动的博客文章页面。经过多次尝试和错误,我最终使用JQuery使网站向右滚动(如果它很大),或者上下滚动(如果是移动的)。唯一的问题是,当文档最初在非移动浏览器中加载时,它的宽度为40000px。这是代码。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.js"></script>
<script>
(function($){
var windowH = $(window).height();
var windowW = $(window).width();
$(window).on('load', function(){
if(windowW >= windowH) {//this is horizontal
var allImgWidth = 0;
$('article img').each(function(){
allImgWidth += $(this).width() + 10 ;//10 is padding
});
$('html, body').width(allImgWidth); //makes page width of all images and padding that I have set elsewhere
$('article img').height(windowH - 150);//this accounts for header height and margin height from top
// $('article img').css('margin-left', '10px');
} else {
$('article img').width(windowW);//if window width is not greater than window height, the images are the width of the original window
}
if(windowW >= windowH) {
(function() {
function scrollHorizontally(e) {
e = window.event || e;
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
document.documentElement.scrollLeft -= (delta*80); // Multiplied by 80 (increases speed of scroll)
document.body.scrollLeft -= (delta*80); // Multiplied by 80
e.preventDefault();
}
if (window.addEventListener) {
// IE9, Chrome, Safari, Opera
window.addEventListener("mousewheel", scrollHorizontally, false);
// Firefox
window.addEventListener("DOMMouseScroll", scrollHorizontally, false);
} else {
// IE 6/7/8
window.attachEvent("onmousewheel", scrollHorizontally);
}
})();//function scrollHorizontally ends
} else {
}//else ends
});//onload ends
$(window).resize(function(){
var windowH = $(window).height();
var windowW = $(window).width();
if(windowW >= windowH) { //horizontal
var allImgWidth = 0;
$('article img').each(function(){
allImgWidth += $(this).width() + 11 ;
});
$('html, body').width(allImgWidth);
$('article img').height(windowH - 150);
$('article img').css('width','auto');//dynamically resizes pics
$('article img').css('margin-left', '9px');
} else { //vertical
$('html, body').width(windowW);
$('article img').width(windowW);
$('article img').css('height','auto');
$('article img').css('margin-top', '10px');
}
if(windowH >= windowW) {
$(window).on('mousewheel DOMMouseScroll', function(event){
if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
// scroll up
} else {
// scroll down
}
});
} else {
$(window).off('mousewheel DOMMouseScroll');
(function() {
function scrollHorizontally(e) {
e = window.event || e;
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
document.documentElement.scrollLeft -= (delta*80); // Multiplied by 80 (increases speed of scroll)
document.body.scrollLeft -= (delta*80); // Multiplied by 80
e.preventDefault();
}
if (window.addEventListener) {
// IE9, Chrome, Safari, Opera
window.addEventListener("mousewheel", scrollHorizontally, false);
// Firefox
window.addEventListener("DOMMouseScroll", scrollHorizontally, false);
} else {
// IE 6/7/8
window.attachEvent("onmousewheel", scrollHorizontally);
}
})();//function scrollHorizontally ends
}
});//window resize ends
})(jQuery);//full function ends
</script>
然后页面的主体本身。。。
<div id="page-wrap">
<article class="post">
<img src="assets/images/tumblr_nqvdnry3Du1ttpk3mo1_1280.jpg">
<p>This is a caption!</p>
</article>
<article class="post">
<img src="assets/images/tumblr_nqvdktfpUS1ttpk3mo3_1280.jpg">
<p>This is a caption!</p>
</article>
<article class="post">
<img src="assets/images/tumblr_nqvdktfpUS1ttpk3mo2_1280.jpg">
<p>This is a caption</p>
</article>
<article class="post">
<img src="assets/images/tumblr_nqvdktfpUS1ttpk3mo1_1280.jpg">
<p>this is a caption</p>
</article>
<article class="post">
<img src="pictures/photo3.jpg">
</article>
<article class="post">
<img src="pictures/photo4.jpg">
</article>
<article class="post">
<img src="pictures/photo5.jpg">
</article>
<article class="post">
<img src="pictures/photo6.jpg">
</article>
<article class="post">
<img src="pictures/photo7.jpg">
</article>
<article class="post">
<img src="pictures/photo7.jpg">
</article>
<article class="post">
<img src="pictures/photo7.jpg">
</article>
<article class="post">
<img src="pictures/photo7.jpg">
</article>
<article class="post">
<img src="pictures/photo7.jpg">
</article>
<article class="post">
<img src="pictures/photo7.jpg">
</article>
<article class="post">
<img src="pictures/photo7.jpg">
</article>
<article class="post">
<img src="pictures/photo7.jpg">
</article>
<article class="post">
<img src="pictures/photo7.jpg">
</article>
<article class="post">
<img src="pictures/photo7.jpg">
</article>
<article class="post">
<img src="pictures/photo7.jpg">
</article>
<article class="post">
<img src="pictures/photo1.jpg">
</article>
</div>
调整页面大小时,它可以正常工作。对于小屏幕来说,加载是可以的。只有当页面最初加载时,才会在大屏幕上显示它有这么大。想法?
您将所有图像宽度与以下代码相加:
$('article img').each(function(){
allImgWidth += $(this).width() + 11 ;
});
然后将你的html/body宽度设置为这个数字。
所以,如果页面的宽度是40000px,那么这就是allImgWidth
的值。检查以确保页面上没有$('article img')
选择器包含的其他图像。
相关文章:
- 如何创建一个具有固定左右列和水平滚动的表
- 通过水平滚动将页眉固定到页面顶部
- 水平视差滚动从头开始-没有插件(jQuery)
- 具有Twitter引导程序的水平滚动表
- 如何避免鼠标水平滚动选项卡面板溢出
- 使用鼠标滚轮水平滚动页面
- 水平滚动不适用于jquery单击
- 每次单击按钮时水平滚动元素
- 动画滚动100%(水平)
- 简单的一页水平滚动
- 移动浏览器-如何删除拖动到水平滚动
- 如何避免在自由jqgrid中单击单元格进行水平滚动编辑
- 网站水平滚动,但单独的页面
- 滚动水平幻灯片
- 单方向滚动:水平或垂直
- 垂直滚动.水平移动
- 背景颜色添加在特定的滚动水平
- 无限滚动水平向左
- Javascript滚动-水平和垂直-到页面上的特定位置
- 自动滚动水平链接跳转