我正在为一个客户端开发一个angular应用程序，我必须在右下角的可内容元素上制作一个可点击的按钮，如下图所示：
为了增加一些难度，内容应该是可滚动的，但按钮应该留在相同的位置，文本应该避开它。当然，我不能添加一些标记/填充，因为它会在内容可编辑区域的底部或右侧添加一些空白列/行。
我可以使用任何js/css提示/库。
编辑#1 :好的，我的问题不够准确。下面是一些代码：
<p id="editfield" contenteditable="true"></p>http://jsfiddle.net/4yr7jsz1/24/
如您所见，这是一个"contenteditable“元素。这样用户就可以在里面输入文本了。但是文本不应该在圆形按钮下面通过，而且应该是srcollable的。
编辑#2 :事实上，我几乎可以很好地使用按钮。在contenteditale容器内插入的元素上的":before“元素允许我放置我希望文本避免的区域。但问题是，我不能通过javascript改变":before“元素的任何参数...下面是html：
<body ng-app="MyApp">
<div id="editable-content" ng-controller="SimpleController">
<span id="clickable-zone"></span>
<p id="editfield" contenteditable="true"></p>
</div>
</body>#clickable-zone是按钮。
通过javascript，我插入了一个空元素，它将使文本循环。
app.directive("contenteditable", function() {
return {
restrict: "A",
link: function(scope, element, attrs) {
var imgPhoto = $('<div class="inside_element"></div>');
var mydiv = $('<div class="myimage"></div>').append(imgPhoto);
element.bind("blur keyup change", function(event) {
if(element.html() != mydiv[0].outerHTML && element.html() != '') {
mydiv.prependTo(element);
}
else {
mydiv.remove();
}
});
$(document).on("click","span#clickable-zone",function() {
console.log('click');
});
}
};
});然后，我为所有不同的内容添加css，这将使我能够在contenteditable元素中定位“空白区域”。
[contenteditable] {
border: 2px dotted #ccc;
background-color: #eee;
padding: 2px;
height: 200px;
width: 500px;
overflow-y: scroll;
}
.inside_element {
float:right;
clear:both;
width: 100px;
height: 100px;
cursor: pointer;
border-radius: 50%;
}
.myimage:before {
content: '';
display: block;
float:right;
height: 100px;
}
#clickable-zone {
position: absolute;
bottom: 4px;
right: 4px;
border-radius: 50%;
height: 100px;
width: 100px;
float:right;
background-image: url("https://i.vimeocdn.com/portrait/58832_300x300");
background-repeat: no-repeat; /*Prevent showing multiple background images*/
background-size: 100px 100px;
z-index: 5;
cursor: pointer;
}
#editable-content {
height: 208px;
width: 508px;
position: relative;
}我不确定有没有办法做到这一点，任何帮助都会很好:)
提前感谢！
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-08-23 20:46:13
因此，我最终找到了答案，找到了一种方法，将“之前”的peuso元素移动到contenteditable元素中。以下是代码片段：
var app = angular.module("MyApp", []);
app.controller('SimpleController', function($scope){
});
app.directive("contenteditable", function() {
return {
restrict: "A",
link: function(scope, element, attrs) {
var imgPhoto = $('<div class="inside_element"></div>');
var mydiv = $('<div class="myimage"></div>').append(imgPhoto);
var initScrollHeight = element[0].scrollHeight;
var initAvoidElementHeight = 100;
element.bind("blur keyup change scroll", function(event) {
var position = element[0].scrollHeight;
if(element[0].scrollTop > 0) {
var position = element[0].scrollTop + initScrollHeight;
}
else if(element[0].scrollHeight > initScrollHeight) {
var position = initScrollHeight;
}
var diffScroll = parseInt(position - initScrollHeight);
mydiv.css('height', initAvoidElementHeight + diffScroll);
if(element.html() != mydiv[0].outerHTML && element.html() != '') {
mydiv.prependTo(element);
}
else {
mydiv.remove();
}
});
$(document).on("click","span#clickable-zone",function() {
console.log('click');
});
}
};
});[contenteditable] {
border: 2px dotted #ccc;
background-color: #eee;
padding: 2px;
height: 200px;
width: 500px;
overflow-y: scroll;
}
.inside_element {
float:right;
clear:both;
width: 100px;
height: 100px;
cursor: pointer;
border-radius: 50%;
}
.myimage::before {
content: '';
display: block;
float:right;
height: inherit;
}
.myimage {
height: 100px;
max-height: 0;
}
#clickable-zone {
position: absolute;
bottom: 4px;
right: 4px;
border-radius: 50%;
height: 100px;
width: 100px;
float:right;
background-image: url("https://i.vimeocdn.com/portrait/58832_300x300");
background-repeat: no-repeat; /*Prevent showing multiple background images*/
background-size: 100px 100px;
z-index: 5;
cursor: pointer;
}
#editable-content {
height: 208px;
width: 508px;
position: relative;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="MyApp">
<div id="editable-content" ng-controller="SimpleController">
<span id="clickable-zone"></span>
<p id="editfield" contenteditable="true" ></p>
</div>
</body>
如您所见，我使用了inherit css技巧来传递之前伪元素的动态高度。卷轴仍在工作，我看不出现在性能有任何欠佳。希望有一天这能帮助到某人:)
谢谢你的帮助。
Stack Overflow用户
发布于 2016-08-23 18:48:25
这就是解决方案，按钮保持不变，而内容被滚动。https://jsfiddle.net/8rofx1n9/2/
.btn{
float:right;
position:fixed;
margin-left:300px;
}<html>
Text Goes here
<span > <input class="btn" type="button" value="ClickMe" >
<br/><br/><br/><br/><br/><br/>
Contents.........
<br/><br/><br/><br/>
Contents.........
<br/><br/><br/><br/><br/>
Contents.........
<br/><br/><br/><br/>
Contents.........
<br/><br/><br/><br/>
Contents.........
</span>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39108416
复制相关文章
![[Excel技巧]创建下拉列表](https://developer.qcloudimg.com/http-save/yehe-7215932/e8a502e6cd0882220ca606c02ff21d78.png)
腾讯云开发者
