gpt4 book ai didi

javascript - jquery 可调整大小的处理程序随内容移动?

转载 作者:太空宇宙 更新时间:2023-11-04 15:00:21 24 4
gpt4 key购买 nike

我制作了这个解释一切的 jsfiddle。

My JSFiddle

asd

看看向下/向上滚动时调整大小处理程序会发生什么。

我该如何改变它?我可以为此添加一些 CSS 以始终固定在 div 的底部吗?

最佳答案

html/css 结构不正确。您应该有一个父项(可调整大小的框)、一个子项(带有 handle )和一个包含内容的子项。

这应该可以解决问题:

            <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script></script>

<script type="text/javascript" >

jQuery(document).ready(function($) {

$("#resizable").resizable();

});

</script>
<style type="text/css">
#resizable{

width: 250px;
height: 200px;
background-color: #eee;
text-align: center;

}

#resizable .handles {

width:100%;
height:inherit;
overflow: auto;

}

#resizable .handles .content {

display:block;
padding-left: 20px;
padding-right: 20px;

}
</style>
</head>

<body>



<div id="resizable">
<div class="handles">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut sagittis erat. Ut vitae dictum leo. Proin dignissim lobortis nunc, vitae suscipit ante viverra eu. Integer mauris orci, dignissim a venenatis convallis, dictum vitae leo. Nullam sapien tellus, tristique in venenatis sed, malesuada id justo. Aliquam lobortis consectetur augue, id condimentum odio bibendum sit amet. Suspendisse bibendum, urna nec luctus lobortis, ipsum risus placerat dolor, eget interdum dui mi ut neque. Nunc imperdiet pretium magna eget malesuada. Nam mattis magna in enim ultrices pharetra eu ac leo. Nullam sed purus dolor, a faucibus ipsum. Donec et sagittis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce sollicitudin vehicula laoreet. Duis luctus mattis massa vehicula pulvinar. Integer dictum ultricies augue, non aliquet enim dictum ac. Etiam non mi in nisi porta pulvinar eu non dolor. Nullam et nisl eget sem auctor tincidunt vel ut metus. Vestibulum sed est quis mauris rutrum tristique. Aenean pellentesque malesuada leo non pharetra. Integer commodo, eros vel sollicitudin porta, turpis lacus accumsan magna, non imperdiet mauris mi ut lectus. Nulla eget velit purus. In et nulla mauris. Ut elementum ligula eget est gravida ut euismod tellus auctor. Cras enim velit, vulputate quis iaculis at, sagittis vel nisl. Proin sagittis est quis mi volutpat et molestie nisi pretium. Aliquam pulvinar aliquet nisl a laoreet. Suspendisse potenti. Praesent molestie mattis felis et suscipit. Curabitur vulputate est nec nunc sollicitudin ultricies. Aliquam et sapien eros, vitae molestie massa. Nullam quis pellentesque odio. Suspendisse at mauris vel massa consequat tempor sed eget nulla. Suspendisse ullamcorper, velit mattis condimentum sodales, est massa sollicitudin velit, vel laoreet turpis est ut metus. Suspendisse elementum, diam sit amet tincidunt cursus, orci erat sollicitudin neque, id varius augue nibh vitae odio. Proin congue metus id arcu congue adipiscing. Maecenas sed augue in metus placerat blandit non vel dui. Duis nec placerat justo. Maecenas metus dui, aliquet id fermentum non, fringilla mattis nibh. Donec porta pellentesque ligula, fringilla tristique justo aliquam non. Sed mi arcu, tincidunt a pulvinar eu, varius vitae ante. Donec congue egestas ipsum. Quisque feugiat, magna vel ultricies auctor, nulla velit luctus enim, sed adipiscing felis arcu vitae elit. Phasellus luctus sapien vitae tortor pulvinar vel placerat purus tincidunt. Phasellus posuere molestie purus. Donec mauris neque, bibendum nec consectetur eget, porttitor ut lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In hac habitasse platea dictums

</div>
</div>
</div>
</body>
</html>

希望这对您有所帮助,编码愉快 :)

关于javascript - jquery 可调整大小的处理程序随内容移动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16488506/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com