javascript - jQuery - 减少滚动函数中的代码的技术

Question

我经常有这样的代码，我认为肯定有一种方法可以把它写得更短。如果有的话，我很乐意学习一些新技术 =)

请提醒它位于滚动函数内。每个 block 都用于横向滚动的一层。

st : 是实际的scrollTop() cat3 :本例中 3*wh 之前的内容滚动顶部 cat4 : 之前内容的滚动顶部 + cat3 的宽度 cat5 : 之前内容的scrollTop+layer1的宽度+cat4的宽度 ...

var w3 = st - (3 * wh);
if (w3 > 0) {
    $('#cat3 .inside').css({
        "left" : -1 * w3 + "px",
        "position" : "fixed"
    });
} else if (w3 < 0){
    $('#cat3 .inside').css({
        "left" : "0",
        "position" : "absolute"
    });
}

var w4 = st - (3 * wh + fh[3]);
if (w4 > 0) {
    $('#cat4 .inside').css({
        "left" : -1 * w4 + "px",
        "position" : "fixed"
    });
} else if (w4 < 0){
    $('#cat4 .inside').css({
        "left" : "0",
        "position" : "absolute"
    });
}

var w5 = st - (3 * wh + fh[3] + fh[4]);
if (w5 > 0) {
    $('#cat5 .inside').css({
        "left" : -1 * w5 + "px",
        "position" : "fixed"
    });
} else if (w5 < 0){
    $('#cat5 .inside').css({
        "left" : "0",
        "position" : "absolute"
    });
}

感谢您的建议!

Answer 1

也许将重复的代码包装在函数中:

function setScroll(value, selector) {
  var element = $(selector + ' .inside');
  var left, position;

  if (value > 0) {
    left = -1 * value + "px";
    position = 'fixed';
  } else if (value < 0){
    left = 0;
    position = 'absolute';
  }

  element.css({left, position});
}

var w3 = st - (3 * wh);
var w4 = st - (3 * wh + fh[3]);
var w5 = st - (3 * wh + fh[3] + fh[4]);

setScroll(w3, '#cat3');
setScroll(w4, '#cat4');
setScroll(w5, '#cat5');

element.css({left,position}); 是 ES6 语法，如果由于某种原因你不能使用 ES6，请将此行替换为:

element.css({
  left: left,
  position: position
});

诀窍是识别哪些部分发生变化，哪些部分没有变化。我发现这里只有两件事发生了变化:与 0 比较的值以及正在修改的元素。