3

我正在使用滚动 jquery 插件，滚动的宽度是浏览器的宽度，所以当我的内容宽度小于浏览器宽度时，我希望内容从浏览器的中心开始。

这是我将内容居中所需的像素数量。

查询

var totalWidth = 0;
$('.scrollableArea img').each(function(){
     totalWidth += parseInt($(this).width(), 10);
}); 

//totalWidth is the width of the content

var containWidth = $('#makeMeScrollable').width(); //browser width

containWidth /= 2;
totalWidth /= 2;
startWidth = containWidth - totalWidth;

有什么办法可以使滚动内容startWidth从左侧开始吗？

如果内容宽度小于浏览器宽度，则 scrollDiv 的其余部分将填充 75px div。

所以html看起来像

HTML

<div class="scrollableArea">
   <img/>
   <img/>
   <img/>
   <div class="filler"/>
   <div class="filler"/>
   <div class="filler"/>
   <div class="filler"/>
   ...etc
</div>

这是插件网站http://www.smoothdivscroll.com/

4

2 回答 2

0

Smooth Div Scroll 有一个名为 move 的方法，您可以使用该方法使滚动条移动您指定的像素数。

因此，如果您希望它向右滚动 100 像素，请使用如下方法：

$("#makeMeScrollable").smoothDivScroll("move", 100);

因此，如果您有希望它开始的像素位置，则可以在滚动条初始化时进行移动。我还没有测试过这段代码，但它应该可以与以下内容一起使用：

$("#makeMeScrollable").smoothDivScroll({
    setupComplete: function(eventObj, data) {
        $("#makeMeScrollable").smoothDivScroll("move", startWidth);
    }
});

我希望我正确理解了你的问题。:-)

于 2013-08-24T18:52:47.763 回答
0

jQueryv1.8.3+ 包含内置的浏览器滚动效果。您可以使用此内置功能，如下所示：

$('.scrollableArea').scrollLeft(startWidth );

这是提供的 jQuery 源代码：

// Create scrollLeft and scrollTop methods
jQuery.each( {scrollLeft: "pageXOffset", scrollTop: "pageYOffset"}, function( method, prop ) {
var top = /Y/.test( prop );

jQuery.fn[ method ] = function( val ) {
    return jQuery.access( this, function( elem, method, val ) {
        var win = getWindow( elem );

        if ( val === undefined ) {
            return win ? (prop in win) ? win[ prop ] :
                win.document.documentElement[ method ] :
                elem[ method ];
        }

        if ( win ) {
            win.scrollTo(
                !top ? val : jQuery( win ).scrollLeft(),
                 top ? val : jQuery( win ).scrollTop()
            );

        } else {
            elem[ method ] = val;
        }
    }, method, val, arguments.length, null );
};
});
于 2013-08-20T15:42:55.220 回答