Question

我有一个div，每当我用鼠标滚轮滚动时，我会扩展10％。问题是它从左到右扩展。我怎样才能从中间扩展呢？

我搜索过一个解决方案，但我找到的答案与动画有关。

HTML

<body>
    <div id="holder" />
</body>

JS

zoom = value => {
    let size = value;
    return {
        up: () => {
            size += 10;
            holder.style.height = `${size}%`;
            holder.style.width = `${size}%`;
        },
        down: () => {
            size -= 10;
            holder.style.height = `${size}%`;
            holder.style.width = `${size}%`;
        }
    }
}
zoom = zoom(100);

document.onmousewheel = event => {
    (event.wheelDelta > 0) ? zoom.up() : zoom.down();
}

CSS

body {
    background-color: rgb(33, 37, 43);
    align-content: center;
    overflow: hidden;
}
#holder {
    height:100%;
    width: 100%;
    margin: auto;
    background: url("some-image.jpg") no-repeat center/contain;
}

＆＃13;

var zoom = value => {
        let size = value;
        return {
            up: () => {
                size += 10;
			    holder.style.height = `${size}%`;
			    holder.style.width = `${size}%`;
            },
            down: () => {
                size -= 10;
			    holder.style.height = `${size}%`;
			    holder.style.width = `${size}%`;
            }
        }
    }
    zoom = zoom(100);
    
    document.onmousewheel = event => {
		(event.wheelDelta > 0) ? zoom.up() : zoom.down();
	}

＆＃13;

.body {
        background-color: rgb(33, 37, 43);
        align-content: center;
        overflow: hidden;
    }
    #holder {
        height:100%;
        width: 100%;
        margin: auto;
        background: url("http://placehold.it/300x300") no-repeat center/contain;
    }

＆＃13;

<div class="body">
<div id="holder" />
</div>

＆＃13;

Answer 1

如果flexbox是一个选项，您只需将display: flex添加到body - 请参阅下面的演示：

zoom = value => {
  let size = value;
  return {
    up: () => {
      size += 10;
      holder.style.height = `${size}%`;
      holder.style.width = `${size}%`;
    },
    down: () => {
      size -= 10;
      holder.style.height = `${size}%`;
      holder.style.width = `${size}%`;
    }
  }
}
zoom = zoom(100);

document.onmousewheel = event => {
  (event.wheelDelta > 0) ? zoom.up(): zoom.down();
}

body {
  background-color: rgb(33, 37, 43);
  align-content: center;
  overflow: hidden;
  display: flex; /* ADDED */
  height: 100vh; /* initial height*/
}

#holder {
  height: 100%;
  width: 100%;
  margin: auto;
  background: url("http://placehold.it/100x100") no-repeat center/contain;
}

<div id="holder" />

另一种方法是定位 - 见下文：

zoom = value => {
  let size = value;
  return {
    up: () => {
      size += 10;
      holder.style.height = `${size}%`;
      holder.style.width = `${size}%`;
    },
    down: () => {
      size -= 10;
      holder.style.height = `${size}%`;
      holder.style.width = `${size}%`;
    }
  }
}
zoom = zoom(100);

document.onmousewheel = event => {
  (event.wheelDelta > 0) ? zoom.up(): zoom.down();
}

body {
  background-color: rgb(33, 37, 43);
  align-content: center;
  overflow: hidden;
  height: 100vh; /* initial height*/
}

#holder {
  height: 100%;
  width: 100%;
  margin: auto;
  background: url("http://placehold.it/100x100") no-repeat center/contain;
  /* ADDED THESE */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

<div id="holder" />

Answer 2

你非常接近！我更新了你的代码段，以便它可以运行;将身体选择器更改为一个类，但这只是为了演示目的。

您只需要在css中声明更多内容，以获得Flexbox及其居中功能的好处。

＆＃13;

var zoom = value => {
        let size = value;
        return {
            up: () => {
                size += 10;
			    holder.style.height = `${size}%`;
			    holder.style.width = `${size}%`;
            },
            down: () => {
                size -= 10;
			    holder.style.height = `${size}%`;
			    holder.style.width = `${size}%`;
            }
        }
    }
    zoom = zoom(100);
    
    document.onmousewheel = event => {
		(event.wheelDelta > 0) ? zoom.up() : zoom.down();
	}

＆＃13;

.body {
        background-color: rgb(33, 37, 43);
        align-content: center;
        overflow: hidden;
        height: 100vh;
        width: 100vw;

        /* This part! */
        display: flex;
        justify-content: center;
    }

    #holder {
        height:100%;
        width: 100%;
        margin: auto;
        background: url("http://placehold.it/300x300") no-repeat center/contain;
    }

＆＃13;

<div class="body">
<div id="holder" />
</div>

＆＃13;

从中间扩展<div>

2 个答案: