Question

首先，提前感谢任何帮助。其次，我想提一下，我已经查看了与此主题相关的不同问题以及在MDN上阅读animate（）和scrollLeft（）的文档。我认为我的问题实际上更多地基于语法而不是功能使用，这就是为什么其他问题对我没有帮助。

现在，关于这个问题。我试图修改我之前编写的javascript代码，以便一个函数可以对任何用户的视口做出反应。

在HTML方面，我有一张包含<tr>和3 <td>的表格。 3 <td>填充了图片和信息，当用户点击下面的按钮时，表格会自动滚动到相应的内容。按钮工作正常。问题实际上是图像比视口大（在任何设备上）等初始页面加载时，图像需要滚动与视口和资源大小成比例的距离（我根据视口加载不同的资源）也）。我发现，滚动距离的公式是 0.5( assetWidth ) - 0.5( viewportWidth )。

所以，这是我提出的JS（这都是jQuery（文档）.ready（function（$）{

var scrollDistance;

if ($('#interactive-row:visible').length == 0) {
    //Viewport > 801px
    var assetWidth = 1920;
    console.log("bouta set scrolDistance");
    scrollDistance = ( 0.5 * assetWidth ) - ( 0.5 * $( window ).width() );
} else {
    //Viewport < 800px
    var assetWidth = 1428;
    scrollDistance = ( 0.5 * assetWidth ) - ( 0.5 * $( window ).width() );
}

//scroll to zero so that whne user goes "back" slider position is reset (w/o variable lastClick gets messed up)
$('.table-container').animate({
    scrollLeft: 0
}, "slow");
console.log( "Scroll Distance is " + scrollDistance + " calculation is about to begin." );
//move slider to middle of SSI screen
$('.table-container').animate({
    scrollLeft: += scrollDistance.valueOf() 
}, "slow");

问题（我相信）是在倒数第二行，此时我的意图是让浏览器滚动到scrollDistance内的任何数字。

注意：这是firefox和chrome所说的：“SyntaxError：期望表达式，得到'+ ='[了解更多]”

此外，我已经尝试使用scrollDistance而不添加.valueOf（）。我最近把它放在最近，以防我在javascript中遇到某种类型的问题而我不知道。

请随意查看此图片，以便更好地了解我要做的事情。 Graphic of what browser should display

在此先感谢您的帮助，我是Javascript的新手，您可以告诉我的任何事情（甚至只是关于我如何编写代码的一般指示）都非常感谢！

编辑：我刚想到也可能值得注意的是我的console.log（）根本不起作用，但如果滚动开始工作，我可能不在乎：D

如何在animate函数中正确使用变量scrollLeft

0 个答案: