Question

我正在使用从 stackoverflow 中的帖子中找到的代码来水平滚动分区。我可以将div滚动为全宽，但是不能滚动特定的宽度。

$("div").on("click", function(event) {
  event.preventDefault();
  $("html, body").animate({
    scrollLeft: $(document).width()
  }, "slow");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>    
 
<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

以上代码有效！

jQuery文档说width（）函数可以获取值作为参数，但是当我尝试如下操作时，滚动无法正常工作。

$("div").on("click", function(event) {
  event.preventDefault();
  $("html, body").animate({
    scrollLeft: $(document).width(50)
  }, "slow");
});

我该如何解决？

Answer 1

您在这里找到解决方法

文档：https://api.jquery.com/scrollleft/

$("div").on("click", function(event) {
  event.preventDefault();
  $("html, body").animate({
    scrollLeft: "50px"
  }, "slow");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

希望这会对您有所帮助。

Answer 2

这是因为构造$(document).width(50)无效，您只能使用常规数字或计算结果。例如，这些结果有效：

$(document).width()
50
$(document).width() - 50

这里是一个例子：

$("div").on("click", function(event) {
  event.preventDefault();
  $("html, body").animate({
    scrollLeft: $(document).width() - 1000
  }, "slow");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>

Answer 3

原因

为什么scrollLeft: $(document).width(50)不能工作，因为$(document).width(50)没有返回有效数字，这是原因。（因为它是setter方法。）

修复

.scrollLeft（value）是预期的类型：Number（一个整数，指示要将滚动条设置到的新位置。）

$("div").on("click", function(event) {
    event.preventDefault();
    var ScrollValue = $(document).width() - 100;
    $("html, body").animate({
        scrollLeft: ScrollValue
    }, "slow");
});

ScrollValue可以根据您的要求进行计算，并作为整数值传递。

希望这可以解决您的问题，有关更多信息，请参见：https://api.jquery.com/scrollleft/

Answer 4

$(document).width()

jQuery width函数参数不起作用

4 个答案: