Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.7k views
in Technique[技术] by (71.8m points)

html - CSS Transform scale scrolling issue

I am creating a web app that uses CSS' transform scale property. As shown by the image below, I have an object inside of a container, which fits nice and snugly inside, without any overflowing content. This is how I wish for it to be.

Initial view

My issue is brought up when I re-scale the object to a size greater than the container. As shown by the image, clearly the object is larger than the container. As marked by the arrows and labels of "scrollable area", the container can scroll to these areas, but the parts labelled with "hidden" are not visible or accessible through the scroll due to their overflow.

When scale is changed

For a practical view of my issue, here's a link to a codepen with my code:

CodePen

Snippets of my CSS code area as follows:

#container {
  position: fixed;
  width: 300px;
  height: 200px;
  border: 1px solid #000000;
  left: 0px;
  top: 0px;
  margin-left: 330px;
  margin-top: 10px;
  overflow: scroll;
  display: block;
  text-align: center;
}

#object {
  position: relative;
  width: 120px;
  height: 120px;
  display: inline-block;
  background-color: rgba(255, 0, 255, 0.45);
  margin-top: 40px;
  border-radius: 25px;
  transform: scale(3); /* This would be scale(1) on the small object */
}

This issue is holding back the development of my web app, so thanks in advance for your time and contributions.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

My best guess would be that this is happening because of transform origin. Try setting it to 0 0 should fix Your issue:

#object2 {
  position: relative;
  width: 120px;
  height: 120px;
  display: block;
  background-color: rgba(255, 0, 255, 0.45);
  border-radius: 25px;
  transform: scale(3);
  transform-origin: 0 0;
}

Demo codepen


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...