1. 程式人生 > >ant-Design------select的option 隨頁面滾動的問題

ant-Design------select的option 隨頁面滾動的問題

選單渲染父節點。預設渲染到 body 上,如果你遇到選單滾動定位問題,試試修改為滾動的區域,並相對其定位。示例

<div style={{ padding: 100, height: 1000, background: '#eee', position: 'relative' }} id="area">
  <Select
     defaultValue="lucy"
     style={{ width: 120 }}
     getPopupContainer={() => document.getElementById('area')}
   >
     <Option
value="jack">
Jack</Option> <Option value="lucy">Lucy</Option> <Option value="yiminghe">yiminghe</Option> </Select> </div>

程式碼分解:

<div style={{ padding: 100, height: 1000, background: '#eee', position: 'relative' }} id="area">

</div>
  <Select
        getPopupContainer={()
=>
document.getElementById('area')} > </Select>

相關推薦

ant-Design------select的option 頁面滾動的問題

選單渲染父節點。預設渲染到 body 上,如果你遇到選單滾動定位問題,試試修改為滾動的區域,並相對其定位。示例 <div style={{ padding: 100, height: 1000,

彈窗居中,不會頁面滾動變化,直接固定在屏幕中央

tran ansi 彈窗 form nsf 直接 left 隨著 transform 定位top為50%;left為50%; 然後使用transifrom transform: translate(-50%, -50%); -webkit-transf

ScrollReveal-元素頁面滾動產生動畫的js外掛

簡介 和 WOW.js 一樣,scrollReveal.js 也是一款頁面滾動顯示動畫的 JavaScript,能讓頁面更加有趣,更吸引使用者眼球。不同的是 WOW.js 的動畫只播放一次,而 scrollReveal.js 的動畫可以播放一次或無限次;WOW.js 依賴 animate.css,而 scr

表格標題頁面滾動固定在頂端的實現方式

最近接到一個需求,要求做表格標題隨頁面滾動,表格表頭固定在頁面頂端,這個任務以前也完成過,但這次實現出現了一些問題,在此記錄下來。 首先重現一下基本的思路,在表格和表頭都已經是設計好的並且固定的情況下,重新在div裡新建一個表格的表頭,格式和樣式要和顯示出來的表頭一樣,然後

ant-design 實現 添加頁面

用戶管理 pla 頁面 idm def 添加用戶 reat rip label 1.邏輯代碼 /** * 添加用戶 */ import React,{PureComponent} from ‘react‘ import {Card,Form,Input,Select,

Ant Design 頁面出現dispatch is not a function

出現的問題: 原因:這種出現的問題時,原因是我們調介面的時候出現的 解決辦法:第一看我們配置的路由有沒有寫上,                   第二:看我們的有沒有import dva&n

關於ant design pro框架找js頁面的問題

ant design pro 怎樣找對應的js頁面 相信第一次用ant design pro的朋友可能會對裡面的對應頁面關係給搞混,因為它不像h5裡連線是可以看到的, 下面就為大家分享下它的對應的js頁面是在哪。 程式碼在src目錄下,在locales資料夾下可以看到裡面有好幾個資料

創建頁面---基於Ant-Design-Pro-2-0-的CMS管理後臺入門系列

啟動項 表情 在一起 項目 cms 系列 .com att git 拉取項目 luwei.web.study-ant-design-pro, 切換至 page 分支,可看到創建頁面的效果 啟動項目 前置:安裝完依賴包,若未安裝,請移步 安裝項目依賴包 運行命令啟動項

Ant Design Pro專案開啟頁設為登入或者其他頁面

Ant Design Pro專案開啟頁設為登入或者其他頁面 一、開啟頁設為登入頁 首先找到utils包中的authority檔案,在該檔案中找到如下程式碼: export function getAuthority(str) { // return localStorage.getItem('ant

ant design pro 頁面載入原理及過程,@connect 裝飾器

一、概述   以列表頁中的標準列表為主      Ant Design Pro 預設通過只需瀏覽器單方面就可處理的 HashHistory 來完成路由。如果要切換為 BrowserHistory,那在 src/index.js 中也有對應的內容可以直接修改,但需要在後端

如何解決ant-design頁面非同步載入的問題

其實解決這個問題,不是特別難,就是有些時候,人們會想不到這麼做首先,在上一期的從mock中拿到資料之後  這是我的另外一份資料import React, { Component } from 'react'; import { connect } from 'dva';@co

通過Blazor使用C#開發SPA單頁面應用程式(4) - Ant Design Button

  前面學習了Blazor的特點、環境搭建及基礎知識,現在我們嘗試的做個實際的元件。   Ant Design是螞蟻金服是基於Ant Design設計體系的 UI 元件庫,主要用於研發企業級中後臺產品。目前官方是基於React和Angular實現的,今年也推出了Vue的實現。其元件涵蓋面

《Asp.Net Core3 + Vue3入坑教程》 - Vue 2.使用Ant Design of Vue編寫頁面 & vue-router 初試

# 簡介 《Asp.Net Core3 + Vue3入坑教程》 此教程適合新手入門或者前後端分離嘗試者。可以根據圖文一步一步進操作編碼也可以選擇直接檢視原始碼。每一篇文章都有對應的原始碼 # 目錄 #### 《Asp.Net Core3 + Vue3入坑教程》系列教程目錄 Asp.Net Core後端專案

HTML標簽marquee 來制作頁面滾動

實現 動圖 單位 頁面 復制 logs 語法 content 但是 頁面的自動滾動效果,可由javascript來實現,但是今天無意中發現了一個html標簽 - <marquee></marquee>可以實現多種滾動效果,無需js控制。 使用marq

解決移動端頁面滾動後不觸發touchend事件

spa scrip code cli 時有 解決方法 ng- clas parent 解決移動端頁面滾動後不觸發touchend事件 問題 在移動端頁面進行優化時,一般使用touch事件替代鼠標相關事件。用的較多的是使用touchend事件替代P

頁面滾動後 頂部的透明度變化

fun parseint 透明 position css city ont page bsp css: body: margin-top:XXpx; .page_header_container: position:fixed; js: var $window =

頁面滾動圖片等元素動態加載插件jquery.scrollLoading.js

一次 透明圖 需求 ble date 也不能 設置 瀏覽器 ack   如果一個網頁很長,那麽該頁面的加載時間也會相應的較長。而這裏給大家介紹的這個jQuery插件scrollLoading的作用則是,對頁面元素進行動態加載,通俗的說就是滾到哪就加載到哪,屏幕以下看不見的

JS監聽頁面滾動到底部事件

his div span 頁面 == nbsp scroll win cnblogs 廢話不說,直接上代碼,放心我這個是最好的,直接放到js腳本裏,直接生效: $(window).scroll(function(){ var scrollTo

如何利用Facebook的create-react-app腳手架創建一個基於ant design mobile的項目

https dev one 解決方案 edas mdm and tro 輸入 引言:   create-react-app是Facebook發布的一款全局的命令行工具用來創建一個新的項目。   通常我們開始做一個react web或者 app 項目的時候,都會自己

基於jQuery實現頁面滾動時頂部導航顯示隱藏效果

center query styles 顯示 true function viewport top int <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=