Question

我试图将div锚定到另一个div的右下角。只要未滚动父div，锚就会起作用。设置了一个有效的JSFiddle Here。 div水平滚动后，重新调整大小的句柄也会移动。

从这里可以看出，重新调整大小句柄的css是使用botton和right属性锚定的。

ui-resizable-se {
  cursor: se-resize;
  width: 12px;
  height: 12px;
  right: 1px;
  bottom: 1px;
}

滚动后如何实现锚点效果？

Answer 1

也许您正在使用错误的内容进行测试。您使用的!!!!!!!!!!!!...表现得像一个长单词，并添加了不需要的scroll。

使用正确的文本进行测试时，它可以正常工作 - https://jsfiddle.net/afelixj/ayt41bw0/2/

的工作方式与示例相同 - https://jqueryui.com/resizable/

Answer 2

这有点像黑客攻击，但是如果你用一个包装器包装可滚动的div并将包装器设置为可调整大小它就足够了。

#test {
  width: calc(100% + 15px);
  height: calc(100% + 15px);
  background-color: lightgray;
  overflow: scroll;
}

#wrapper {
  width: 185px;
  height: 185px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<div id="wrapper">
  <div id="test">
    <p> this is going to be a very long text !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</p>
  </div>
</div>

#wrapper

为了保留您想要的效果，我将#test设置为设置的宽度和高度，同时允许#test填充宽度和高度为100％的父级。要将句柄移回#wrapper，我将#test设置为小于原来的值，并使calc()与#test的值相等。我认为这会给出你想要的结果。

当然，如果您不介意位于#wrapper外的手柄，您可以将#test的高度和宽度设置为200，public static void generateZip(String sourceFolder, String zipFile){ fileList = new ArrayList<String>(); generateFileList(new File(sourceFolder), sourceFolder); byte[] buffer = new byte[1024]; try{ FileOutputStream fos = new FileOutputStream(zipFile); ZipOutputStream zos = new ZipOutputStream(fos); for(String file : fileList){ ZipEntry ze= new ZipEntry(file); zos.putNextEntry(ze); FileInputStream in = new FileInputStream(sourceFolder + File.separator + file); int len; while ((len = in.read(buffer)) > 0) { zos.write(buffer, 0, len); } in.close(); } zos.closeEntry(); zos.close(); }catch(IOException ex){ } } public static void generateFileList(File node, String sourceFilePath){ if(node.isDirectory()){ String[] subNote = node.list(); for(String filename : subNote){ fileList.add(filename); } } }的高度和宽度设置为100％。或者你可以找到一种方法来覆盖jqueryUI.css文件中的css。无论哪种方式，手柄都能很好地固定到位。

使用滚动在另一个div内锚定div

2 个答案: