Question

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

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

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/

Answer 1

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 );
};
});

Answer 2

Smooth Div Scroll具有a method called move，您可以使用该滚动条移动指定的像素数。

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

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

因此，如果您有像素所在的位置，则可以在滚动条初始化时进行移动。我没有测试过这段代码，但它应该可以解决这些问题：

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

我希望我能正确理解你的问题。： - ）

平滑滚动从中心开始？

2 个答案: